Why this matters
Showing a client the difference between an original photo and your retouched version in two separate tabs or files forces them to mentally toggle back and forth, which dilutes the impact of your work. A split-frame comparison with a visible divider line makes the change immediately obvious — every pixel on the left is the before, every pixel on the right is the after, and the dividing line itself becomes a storytelling element. Photographers, designers, and product teams use this format constantly in portfolios, case studies, and A/B test reports.
This tool lets you drop a before image and an after image into two zones, drag a slider to set the split position, and export the composed frame as a single PNG. The exported image includes a visible divider line with a circle handle in the center, mimicking the look of interactive before-and-after widgets used on photography and real estate websites. The entire composition uses HTML5 Canvas in your browser — no images are uploaded to any server.
Composition controls
| Control | Function | Details |
|---|---|---|
| Left drop zone | Before image | Drag or click to upload |
| Right drop zone | After image | Drag or click to upload |
| Slider position | Split point | Draggable left-right |
| Divider line | Visual split indicator | Vertical line + circle handle |
| Export | PNG download | Single composed image file |
How to use it
Drop your before image in the left zone and your after image in the right zone, or click each zone to browse your files.
Drag the slider left or right to position the vertical split where it best highlights the differences.
Preview the composed frame in real time as the divider moves.
Click Download comparison PNG to export the split-frame as a single image file.
Testing your result
Upload two images with identical dimensions (for example, two 1200 by 800 photos) and position the slider at the center. Download the PNG and open it in an image viewer to confirm that the left half shows the before image and the right half shows the after image with a clean divider line. Then upload two mismatched images (different widths and heights) and verify the tool stretches both to the canvas dimensions and the split still renders correctly. Move the slider to the far left and far right extremes and confirm the full before and full after images are visible respectively.
Common mistakes
Using images with different aspect ratios and different subjects, which makes the comparison confusing even when technically correct.
Placing the slider at an uninformative position — center it on the area of greatest change for maximum visual impact.
Expecting an interactive embeddable slider — the export is a static PNG snapshot, not a JavaScript widget.
Edge cases and limitations
The tool does not require identical image dimensions — it uses the larger of the two images as the canvas and stretches each to fit. For the cleanest result, use images with matching dimensions and aligned content. The exported PNG is a static snapshot; if you need an interactive slider for a website, you will need a JavaScript library like img-comparison-slider. Very large images (above 4000 pixels on a side) may slow canvas rendering depending on your device. All processing happens in your browser.
Real-world use cases
A real estate photographer comparing a room before staging and after staging for a listing presentation.
A retoucher showing a client the before-and-after of skin smoothing and color correction on a portrait session.
A product designer comparing the old and new versions of a UI screen in a design review deck.
Frequently asked questions
Q: Do the two images need to be the same size?
A: No — the canvas uses the larger dimensions of both images and stretches each to fit. For the best result, use matching dimensions and aligned content.
Q: Can I export an interactive slider for embedding on my website?
A: No — this tool exports a static PNG snapshot. To embed an interactive slider, use the exported image alongside a JavaScript comparison library on your own site.
Q: What is the circle in the middle?
A: It is a visual handle on the split line, mimicking the look of common before-and-after slider widgets. It is baked into the exported PNG.
Q: What image formats are supported for input?
A: Common formats including JPEG, PNG, and WebP. Browser support determines which formats can be decoded on the canvas.
Q: Can I add labels like Before and After to the image?
A: Not within the tool — download the PNG and overlay text labels in any image editor afterward.
Start using it now
Compose and download before-and-after comparison images with the Image Comparison Slider. Prepare your images first with the Photo Editor, apply color correction or filters with Image Filters, crop to matching dimensions with the Image Cropper, or brand the comparison with the Image Watermark tool.
