Compare Images
Add a before and an after image. Drag the slider, place them side by side, fade one over the other, or let Difference mark every changed pixel. Your images stay in your browser.
Drop or paste two images at once to fill both sides.
Images stay on your device.
How to compare two images
- Select Choose image under Before and After. To fill both sides at once, drop or paste two images together. PNG, JPG, WebP, and HEIC files all work.
- Pick a view: Slider, Side by side, Fade, or Difference. In Slider, drag the line across the image or move it with the arrow keys.
- If the images are different sizes, choose Match widths or Actual size. In Fade, set the After image opacity. In Difference, adjust the Tolerance so small color shifts don't count.
- Select Download PNG to save the current view as one image. Swap flips the two sides, and Start over removes both images.
Which view shows the change best?
Slider is the familiar way to show a before and after screenshot: the before image sits left of the line and the after image right of it. Drag the line back and forth and layout shifts, cropping, and color changes stand out. Fade lays the after image over the before image, so anything that moved shows up twice.
Difference does the looking for you. It checks every pixel, marks changed ones in red over a pale grey copy of the image, and reports how many pixels changed and the smallest area that holds them all. Pixel-by-pixel screenshot comparison catches a nudged icon or a one-word copy change that is easy to miss by eye.
Two JPG files rarely match exactly, even when they show the same thing, because lossy compression shifts colors slightly every time an image is saved. The default 10% tolerance ignores that noise. Set it to 0% to count every pixel that differs, or raise it toward 50% to keep only strong changes.
Development teams run the same check automatically as visual regression testing, comparing new screenshots with approved ones before each release. For a one-off check, two screenshots and this page are enough. If two captures don't line up, the screenshot resolution checker shows each file's pixel size and Retina scale.
Frequently asked questions
Is this image comparison tool free?
Yes. There's no signup and no watermark, and you can compare as many pairs of images as you like.
Are my images uploaded?
No. Your browser loads both images and compares them on your device. Nothing is sent to a server, and closing the tab clears the images.
Can I compare images with different sizes?
Yes. Match widths scales the after image to the before image's width, so a Retina screenshot lines up with a standard one. Actual size keeps both images at their own pixel size, aligned at the top-left corner. In Difference, any area that only one image covers counts as changed.
How does the Difference view decide what changed?
It compares the red, green, and blue values of each pair of pixels. If any of them differs by more than the tolerance, the pixel is marked in red. Transparent areas are compared on a white background. Very large images are compared at a smaller size, and the tool tells you when that happens.
Which image formats work?
PNG, JPG, WebP, and HEIC, plus most other image formats your browser can open. Each image can be up to 50 MB. SVG files aren't supported because they have no fixed pixel grid.
What does Download PNG save?
The view on screen. Slider saves both images split at the line, Side by side saves them next to each other, Fade saves the blend at the current opacity, and Difference saves the red and grey change map. If the full size is too large for your browser, the PNG is scaled down and the tool tells you.
Need matching before and after shots of web pages?
Shotomatic's Website Capture screenshots a list of URLs on your Mac at the viewport you set. It saves that setup, so after a change you can capture the same URLs again and compare the results here.