Compare two images

Drop in two versions of an image (a before and after screenshot, two exports of a design, two photos) and see exactly what changed: differing pixels are highlighted in red, with the share of pixels changed and the box around the changes. Swipe between them or fade one over the other, then download the diff. Free, and your files never leave your browser.

Image A (before)
Image B (after)

Pick two images, drop them on this box, or paste with Ctrl+V (the first paste fills A, the next B).

Options

View
Threshold (0-255)
Different sizes

Highlight color
Box around changes
Slider / fade position

Result

Add both images to compare them.

Spotting changes between screenshots

This is what visual regression testing does: capture a page before and after a change, diff the two screenshots, and look at whatever lit up. A small threshold (the default) ignores invisible JPEG noise and anti-aliasing shimmer; raise it if compression artifacts show up as scattered red dots, lower it to 0 to catch every single value that differs. If the two images have different sizes, they are aligned at the top-left corner and the area that only one image covers counts as changed; or choose to scale the second image to the first.

How it works

Both images are decoded by your browser and drawn onto canvases of the same size. For every pixel the tool takes the largest difference across the red, green, blue and alpha values; above the threshold, the pixel counts as changed. The diff view shows image A faded to grey with changed pixels painted in the highlight color, so even a one-pixel change is easy to find, and the dashed box marks the smallest rectangle that contains every change. "Changed pixels only" shows image B where it differs and nothing elsewhere. Nothing is uploaded; images up to 50 megapixels work.

Comparing two PDFs? Compare PDFs diffs their text word by word. Need to line images up first? Crop or resize one of them. To show both next to each other in one image, use combine images.

Automate it: visual regression with the screenshot API

Comparing the same web page before and after a deploy? Let the Shotmint API take both screenshots at the same viewport, then diff them here or in CI with pixelmatch (full script and GitHub Actions workflow in the visual regression testing guide):

curl "https://shotmint.creasework.com/v1/screenshot?url=https://example.com&width=1280&full_page=true" -H "X-API-Key: YOUR_KEY" -o before.png
# ...deploy...
curl "https://shotmint.creasework.com/v1/screenshot?url=https://example.com&width=1280&full_page=true" -H "X-API-Key: YOUR_KEY" -o after.png

Use block_ads=true and hide_selectors to remove ads, cookie banners and rotating content that would show up as noise. Each screenshot is 1 credit; €5 buys 2,000 with no subscription, and credits never expire.

Get 25 free renders a month Try a full-page screenshot

FAQ

Are my images uploaded? No. The comparison runs in JavaScript on this page.

Why is everything red? The images are probably shifted by a few pixels or have different sizes or scale (for example a 2× retina screenshot against a 1× one). Use the same viewport and scale, or crop them to the same area. If only scattered dots light up, raise the threshold: that is JPEG compression noise.

What does the percentage mean? The share of pixels in the compared area whose difference is above the threshold. 0% means the images are identical within that threshold.

Which formats work? JPG, PNG, WebP, GIF (first frame), BMP, SVG and AVIF where your browser supports it. Convert HEIC first with HEIC to JPG.