Image / Photo workshop

Before and After Slider

Make a before-and-after comparison with editable labels and a live slider. Download a portable HTML file with both images included, an animated GIF wipe, or WebM where supported.

Before and After Slider: Uses the before image proportions and centre-crops the after image to fit. The HTML download contains both PNG images as data URIs and its own keyboard-accessible range slider. GIF wipes fit within 480 by 480 pixels; WebM wipes record for about two seconds where browser recording is available. Runs 100% locally in your browser with zero server file uploads.

Category
Image tools
Runs
In your browser
Cost
Free · no sign-up
Availability
Ready to use
Before and After SliderLocal processing

Runs entirely in your browser

Applies to the next raster export.
Choose the before photo

Click, drag and drop, or paste · stays on this device

Choose the after photo

Click, drag and drop, or paste · stays on this device

The before photo sets the proportions; the after photo is centre-cropped to fit. Still and HTML images fit within 1200 × 1200 pixels. GIF wipes fit within 480 × 480 pixels.

HTML exports contain the images and slider code in one file. Open the file in a browser to drag the slider or use the arrow keys.

Live comparison

Choose both photos to compare them.

WebM recording is unavailable in this browser. Download the GIF wipe instead.

Portable comparison

Both images are normalised to the same proportions and embedded in the HTML as PNG data URIs. A native range input controls the visible after-image area and supports keyboard arrows. The file contains inline JavaScript, which restrictive hosting policies may block.

Animated exports

WebM availability is checked before recording. GIF is the fallback when WebM or canvas capture is unavailable. MediaRecorder support check: https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/isTypeSupported_static

How to use it

  1. Choose the before and after photos.
  2. Add labels and move the comparison slider.
  3. Download HTML for an interactive slider, or GIF or supported WebM for an animated wipe.

Privacy & limitations

Your inputs and images stay in your browser. Nothing is uploaded.

Related tools

Image comparisonInstant photo frameImage Resizer

Frequently asked questions

Does the HTML work offline?

Yes. It includes both images and the slider code in one file, with no external requests.

Why is WebM disabled?

The browser must support WebM recording and canvas capture. When those are unavailable, use the GIF wipe.

How is this different from the image comparison slider?

This page exports a working HTML slider and animated wipes. The image comparison slider exports a static PNG, including side-by-side layouts.

Free tool · runs in your browser · no account required