Image Diff - Before and After Comparison Slider
Load two versions of an image and wipe a divider between them. Both sit in exactly the same position, so anything that moves as the divider passes is a genuine change. Runs at full resolution in your browser.
Original Image (Before)
Modified Image (After)
Why a slider beats two open tabs
Comparing two near-identical images by flipping between browser tabs is surprisingly bad at the job. Your eye loses its reference point in the moment between views, and small shifts in colour, spacing or position slip past unnoticed. Placing both images in exactly the same position and wiping between them removes that gap: anything that moves as the divider passes over it is a change, and anything that stays put is not.
That makes it useful in a few recurring situations. Developers use it for visual regression checks, putting a screenshot from before a CSS change next to one from after to catch layout shifts a diff of the code would never show. Photographers use it to judge an edit against the original, which is the honest way to tell whether a retouch actually improved anything. Designers use it to review revisions between rounds, and anyone comparing a compressed export against its source can use it to find where the artefacts appear.
Both images are loaded straight into your browser and drawn to a canvas, so unreleased UI screenshots, client photographs and internal mockups stay on your machine. That also means the comparison is instant, with no upload wait, and it works at full resolution rather than on downscaled previews, which is what lets you catch a shift of a few pixels.
How to compare two images
- Load the original. Put your baseline file in the Before slot.
- Load the revision. Add the modified version to the After slot.
- Drag the divider. Sweep it slowly across the frame and watch for anything that jumps as it passes.
- Sweep a second time for colour. Position shifts show up on the first pass; tonal and colour changes are easier to spot when you stop the divider over a flat area and move it back and forth.
The comparison is most reliable when both images have identical dimensions, since a size difference makes everything appear to move. If they do not match, square them up first with the image cropper or the size reducer.
Features
Nothing uploaded
Both files are read locally, so unreleased screenshots and client work stay on your machine.
Wipe-through slider
Both images sit in exactly the same position, so anything that moves under the divider is a genuine change.
Full resolution
Comparison happens at native size rather than on a downscaled preview, which is what makes a few pixels of drift visible.
Comparison Tool FAQs
Why is a slider better than opening two tabs?
Flipping between tabs loses your visual reference in the gap between views. A wipe keeps both images in the same position, so any element that moves as the divider passes is a real difference.
Do the two images need to be the same size?
For a meaningful comparison, yes. Different dimensions make everything appear to shift. Match them first with the cropper if needed.
Can I use it for visual regression testing?
Yes, that is one of its best uses. Compare a screenshot from before a CSS change with one from after to catch layout shifts that a code diff will not reveal, without sending project screenshots anywhere.
How do I spot colour changes rather than movement?
Stop the divider over a flat area of the image and move it back and forth in small increments. Position shifts show up on a fast sweep; tonal differences are easier to see with a slow one.
Are my images uploaded?
No. Both files are read locally and drawn to a canvas in your browser, so nothing is transmitted and the comparison is instant.
🔎 Verify it yourself: nothing uploads
Don’t take our word for it. Open your browser’s DevTools (F12 → Network tab), then run this tool on any image. You’ll see no upload request at all — your file never leaves this tab. You can even turn off Wi‑Fi once the page has loaded and keep working. Every tool on this site works the same way — all processing happens on your device.