Image Diff — Compare Two Images Online

Finds and marks differing pixels between two images, with overlay and slider views

Runs in your browser · nothing is uploaded

Image A (original)

Add the reference image first. JPG, PNG, WebP, GIF or BMP; pasting with Ctrl+V works too.

Image B (changed)

Add the changed image. Once A is in, a paste (Ctrl+V) goes to B.

Sensitivity (threshold): 0.10

0 catches the smallest colour change; higher values treat similar colours as equal. The default 0.1 ignores typical JPG compression noise.

Count anti-aliasing differences on text and line edges

When off, soft edge pixels that differ are shown in yellow and left out of the count.

What it does

This tool finds where two similar-looking images differ, down to single pixels. Small text edits, a 1-pixel shift or a colour change that you would miss flipping back and forth are marked in red. Use it to confirm a website change rendered as intended, to find what a designer changed in a revision, or to check a print proof. Besides the difference view, you can overlay the images or split them with a before/after slider.

How to use

Put the reference image in Image A and the changed one in Image B. Screenshots can be pasted with Ctrl+V; once A is filled, a paste goes to B.
The comparison runs as soon as both are in: the number and share of different pixels and the position of the changed area appear.
Move Sensitivity to decide how much small colour change to ignore.
Under View, choose Differences, Overlay (with B’s opacity) or Slider (A on the left, B on the right).
Click Save difference PNG to download the result.

How it works

Pixel comparison: colours at the same position are compared by their distance in the YIQ colour space, which follows how people perceive brightness. A threshold of 0 catches the smallest change; values near 1 are lenient. The default is 0.1.
Anti-aliasing: pixels detected as soft edges, judged against their neighbours, are drawn yellow and left out of the count (optional).
Difference image: unchanged areas show the original as faded grey (10%), different pixels in red.
Size: above 8 million pixels both images are scaled down by the same factor for the comparison, and the changed-area coordinates are converted back to A’s original pixels.
The comparison engine is pixelmatch (ISC licence).

Examples

A	B	Result
Screenshot before, 1280×800	Same page with new button text	Red only around the button, area coordinates shown
Photo PNG	The same file again	“No differences” message
Banner 1200×600	Banner cropped to 1000×600	With kept sizes, the whole 200 px cropped strip differs

For differences in text, use the text diff tool; to cut out part of an image for a closer look, try the image cropper.

FAQ

Can I compare images of different sizes?

Yes. "Fit B to A" is for the same screen saved at another resolution; "Keep sizes, align top-left" is for an image that was cropped or extended. With kept sizes, anything only one image covers counts as different.

JPG images show far too many differences.

JPG compression leaves tiny colour changes you cannot see. Raising the threshold from 0.1 to about 0.2–0.3 ignores that noise and keeps the real changes.

What are the yellow pixels?

Soft edge pixels of text and lines (anti-aliasing) that differ slightly, often just font rendering. By default they are shown in yellow and not counted; tick the option to count them.

What is it good for?

Comparing screenshots before and after a website change, spotting edits in a design revision, checking a print proof against the original, or spot-the-difference puzzles.

Are my images uploaded?

No. Both images are compared in your browser only.

Text Diff

A diff checker that highlights what changed between two texts

Photo Filters

Browser photo filter with presets and sliders for brightness, contrast, saturation and blur

Crop Image

Browser tool that crops photos to a fixed aspect ratio and keeps the original pixels

Image Color Picker

Browser tool that picks colour codes from an image and builds a dominant palette