Before/After Compare Slider Generator
Two images in, one self-contained HTML file out — no library to load and nothing hosted elsewhere.
Before image
After image
Live preview
The exported file embeds both images as data URIs, so it works offline, in an email attachment, or dropped straight into a CMS — nothing external to host.
What the before/After Compare Slider Generator does
A before-and-after slider is the clearest way to show a change: one image sits over the other and a draggable divider reveals more or less of each. Restoration work, retouching, renovation, product comparisons and design revisions all read better this way than as two pictures side by side.
Most implementations are a JavaScript library plus two hosted image files, which is three things to keep working. This generator produces a single HTML file with both images embedded as data URIs and about fifteen lines of inline JavaScript. It has no dependencies, works offline, survives being emailed as an attachment, and can be dropped into a CMS that allows raw HTML without uploading anything first.
The trade-off is file size. Embedding images as data URIs adds about a third to their weight, so the export can run to a few hundred kilobytes. The quality slider is the control that matters: for a comparison widget, 75–85% JPEG is usually indistinguishable from the original and roughly halves the file. Reducing the output width helps more still, since file size scales with pixel count.
Both images are drawn to the same dimensions, taken from the first one. If your two images are different shapes the tool warns you, because the second will be stretched to fit — and a before-and-after where the two frames do not match is misleading rather than merely untidy. Crop both to the same aspect ratio first if they differ.
The widget responds to mouse and touch, scales down on narrow screens through its aspect-ratio box, and labels each side so the comparison is unambiguous even in a screenshot.
How to use it
- Load the before image and the after image. They should be the same shape and framing.
- Set the output width and labels, and pick a handle colour that stands out against both images.
- Drag the preview to check the alignment between the two.
- Download the HTML file, or copy the embed code to paste into a page.
A worked example
A retouching comparison at 900 pixels wide, from two 3000-pixel originals:
| Quality | HTML file size | Appearance |
|---|---|---|
| 95% | ~1.1 MB | Indistinguishable from the originals |
| 82% | ~420 KB | No visible difference at this size |
| 60% | ~230 KB | Slight artefacts in smooth gradients |
82% is the sensible default and is what the tool starts at. The reason to care is that this is a single file containing both images, so it is roughly twice the weight of one photograph — and a slider embedded in a page that already loads slowly is a poor trade. If you need it lighter, reduce the width before reducing the quality: dropping from 900 to 700 pixels cuts the pixel count by nearly 40%.
Frequently asked questions
Does the exported file need anything else to work?
No. Both images are embedded as data URIs and the JavaScript is inline. Open the file directly from your desktop, email it, or paste its contents into a CMS — there is nothing external to host or to break.
Why is the HTML file so large?
It contains both images. Data URIs also add about a third to the encoded size. Lower the output width first and the JPEG quality second; 82% is usually indistinguishable from the original at widget size.
What if my two images are different sizes?
The tool warns you and stretches the second to match the first. That distorts the comparison, so crop both to the same aspect ratio first — the Image Resizer & Cropper can lock a ratio while you crop.
Will the slider work on a phone?
Yes. It responds to touch as well as mouse, and the widget is sized with an aspect-ratio box so it scales down to fit narrow screens without distorting.