Skip to content

Everything runs in your browser. We never see your images. How we prove it β†’

Image Diff β€” Compare Two Images Online

Load two pictures and see exactly which pixels moved β€” as a difference map, a slider, an overlay or an onion-skin fade.

Original

Choose or drop the first image (PNG, JPEG, WebP, GIF, AVIF).

Changed

Choose or drop the second image to compare.

How pixel comparison copes with anti-aliasing

Each picture is decoded onto a canvas, read back as a raw pixel array, and handed to pixelmatch. This is not a byte test. Two exports of one design from one program can differ along every curved edge, because anti-aliasing gets resolved slightly differently each time, and a strict equality check would declare an unchanged screenshot entirely rewritten. So each pixel pair is scored with a perceptual colour-difference metric β€” brightness weighted far more heavily than hue, roughly the way eyes behave β€” and only pairs whose distance clears the threshold are counted. A second pass recognises pixels sitting on an anti-aliased edge and can discount them, which separates "the button shifted two pixels" from "the font renderer on this machine is not the one that produced the baseline".

Four ways to read the result. The difference map paints changed pixels over a dimmed original, with a count and a percentage. The slider drags a hard boundary across both frames. Overlay stacks them at an opacity you set, and onion-skin fades between the pair on a timer β€” quickest for spotting something that moved rather than something that merely recoloured. PNG, JPEG, WebP, GIF and AVIF all decode. If the two files differ in dimensions, the overlapping region is compared and the mismatch reported rather than one image being stretched to fit, since scaling invents differences that were never in either file. For screenshots where wording matters more than layout, put the text into Text Compare instead.

Pictures that stay on your device

What people put side by side here often has no business reaching a stranger's disk: an interface redesign that has not been announced, a scan of a passport or driving licence, an X-ray or lab printout where change over time is the whole point of looking. Decoding happens through a canvas element in your tab, and pixelmatch runs over the arrays that canvas produces. No image data is transmitted, cached on a server, or written anywhere but your own memory. Open your browser's network tab while you use this tool β€” you'll see no request carries your content. Verify it here.

What gets held up to the light

  • A QA engineer chasing a visual regression loads yesterday's baseline screenshot beside today's build after a dependency bump. Raising anti-aliasing tolerance drops the noise from font smoothing away, leaving one misaligned icon glowing in the difference map and a changed-pixel count small enough to paste into the ticket.
  • A print designer checking a proof sets the sheet the printer returned against the file that was supplied, then uses overlay at half opacity to catch a logo that drifted three millimetres during imposition.
  • A conservator documenting a painting compares photographs taken a year apart under matched studio lighting, letting onion-skin fade between them until the areas where varnish has yellowed and one hairline craquelure has widened announce themselves.
  • A radiographer teaching residents puts two studies up with the slider so the room can sweep the boundary themselves and argue about where the margin sits β€” on a laptop that never sends a single frame off the hospital network.

Frequently asked questions

Are my images uploaded?

No. The browser decodes each file locally, a canvas gives the page its pixel array, and the two arrays are compared in the same tab. Nothing is posted, and no server component exists that could hold a copy. Because it is all local, the tool keeps working with the network unplugged β€” see the verification steps.

How big can the images be?

Memory is the ceiling. Two decoded images plus a difference buffer each need roughly width Γ— height Γ— 4 bytes, so a pair of 8000Γ—6000 photographs asks for several hundred megabytes before anything is drawn. Mobile browsers give up sooner than desktops do. Large pairs still compare, just more slowly, and decoding is chunked so the page keeps responding.

Why does it flag differences when the images look identical?

Almost always anti-aliasing or lossy compression. Re-saving a JPEG nudges values across the entire frame without altering anything visible, and two renderers smooth curves differently. Raise the threshold to ignore small perceptual distances, and increase anti-aliasing tolerance to discount edge pixels. If the changed count then collapses, the pair matches to a human eye.

What if the two images are different sizes?

The overlapping top-left region is compared and the size difference is reported next to the result. Nothing gets resampled to force agreement, because resampling touches every pixel and would bury the real change under interpolation artefacts. For a like-for-like read, re-export both at identical dimensions first.

Can I share the comparison with someone?

Not as a link. Link sharing packs text into the URL fragment, and images are files that stay on your device, so there is nothing to encode. Save the difference map off the canvas, or screenshot whichever view makes the point. Reproducing the comparison from the two originals takes seconds anyway.