RunLocalTools

Before / After Image Slider — Compare Two Photos Free

Build a draggable before/after comparison from two images, free. Export a static image, a real interactive HTML slider you can host anywhere, or an animated GIF sweep — all client-side.

What it does

Drop in two images — a before and an after, a renovation, an edit, a redesign — and drag a divider across them to compare. When you’re happy with it, export a flattened comparison image, a self-contained HTML file with a real working slider (no server needed), or an animated GIF that sweeps back and forth on its own for places that can’t embed interactive HTML.

How it works

Both images are drawn onto one canvas using a “cover fit,” the same idea as CSS object-fit: cover: each image is scaled up just enough to fully fill the comparison frame, then cropped evenly (or aligned to a start/end edge, your choice) — so two photos of different dimensions or aspect ratios still line up into one clean frame instead of leaving gaps or squashing either image. The “after” image is drawn full-frame first; the “before” image is drawn on top but clipped to the region behind the divider, so dragging the divider is really just moving where that clip line falls.

The interactive HTML export packages both images as embedded, flattened data — so it’s one file with no external dependencies — plus a small vanilla-JS slider using clip-path, with mouse, touch, and keyboard support built in. Nothing calls home; it’s a real static page you can open straight from your downloads folder, attach to an email, or upload anywhere. The GIF export renders the same comparison at a sequence of divider positions using a smooth ease-in-out sweep (rather than a linear one, which looks mechanical) and encodes them client-side into a looping animated GIF.

How to use it

  1. Drop a “before” image and an “after” image into the two boxes.
  2. Drag directly on the preview to move the divider (or use arrow keys once it’s focused — hold Shift for bigger steps).
  3. Choose horizontal or vertical split, and how mismatched images should align if one needs to be cropped more than the other.
  4. Toggle labels on/off and edit their text if you want “Before”/”After” (or custom wording) baked into the export.
  5. Pick your export: a static PNG at the current divider position, a self-contained interactive HTML file, or an animated GIF.

Need the two photos cropped to matching regions before comparing? Use crop on each first. Want to eyeball an exact color shift between the before and after — say, a paint color or a photo edit — the color picker can sample and compare specific pixels directly.

FAQ

Do the two images need to be the same size? No — they’re cover-fit into a common frame automatically, the same way a CSS background image fills a box. If they have very different aspect ratios, you can choose which edge stays visible (start, center, or end) so the crop lands where you want it.

What’s the difference between the HTML export and the GIF export? The HTML file is a real interactive slider — whoever opens it can drag it themselves, and it works in any modern browser with no plugins. The GIF is a fixed animation that sweeps on its own, which is useful anywhere you can’t embed a webpage (a chat app, a forum post, a slide deck) but can’t be dragged.

Why is the GIF lower resolution than my images? Animated GIFs get large fast — a full-resolution multi-frame animation could be tens of megabytes. The GIF export caps frame size at 640px on the long edge to keep the file a reasonable size to actually share; the PNG and HTML exports aren’t capped the same way.

Can I swap which image is “before” and which is “after”? Yes — the swap button exchanges them (and their labels) in one click without needing to re-upload anything.

Does exporting the interactive HTML file require any external files or a server? No — both images are embedded directly in the file as data, along with the slider’s CSS and JavaScript. It’s fully self-contained and works by just double-clicking it.

Supported formats

Both images can be any common browser-supported format (JPEG, PNG, WebP, GIF, etc.) — they don’t need to match each other. Exports are PNG for the static image, a plain .html file for the interactive slider, and .gif for the animation.