Image Compare Slider (Before / After)
Overlay two images and drag a slider to see the difference. Check quality before and after compression or an edit, and save the current position as a single PNG. The files never leave your browser.
Image compare slider: check quality before and after
Overlay two images and compare them with a slider, then save the current position as one comparison image.
How to use it
Add the before (original) image on the left and the after (result) image on the right. Moving the slider shows the before image to the left of the line and the after image to the right. The size and file size of both images are shown, so you can see how much compression saved. The slider also moves with the left and right arrow keys.
When it helps
Use it to check whether quality visibly dropped after shrinking a file with a compressor, to show a photo before and after an edit, or to compare a logo or design before and after a revision.
Two images of different sizes
The after image is stretched to the before image’s width and height. If both have the same proportions they line up exactly; if not, the after image looks distorted, and a notice appears. The comparison image you save also follows the before image’s size.
Frequently asked questions
- Are my images uploaded?
- No. Both images are processed only inside this browser and are not sent anywhere.
- Does saving include the slider?
- No. You get one still PNG built from the current slider position: the before image on the left, the after image on the right, with a white line at the boundary.