Image Diff
Compare two images pixel by pixel and see exactly what changed — highlight, heatmap, overlay, swipe, and flicker views with similarity, SSIM, PSNR, and region statistics, all in your browser.
Loading tool…
Why comparing two images is harder than subtracting them
Subtracting one image from another is trivial; deciding which of the resulting differences matter is not. Re-saving a JPEG changes thousands of pixels without changing anything a person would notice. Antialiased text renders a hair differently between two runs of the same browser. A screenshot taken on a different display scale is a different size entirely, so before any pixel can be compared, one image has to be resampled — and resampling invents differences of its own.
That is why a serious pixel comparison is a set of decisions rather than one operation: a tolerance for how far a colour may drift before it counts, a rule for antialiased edges, a way to align mismatched dimensions, and a choice of metric. Percentage of changed pixels answers 'how much moved'. PSNR and MSE answer 'how far off is it numerically'. SSIM answers 'did the structure change, or only the shading'. Reading all three together is what separates a real regression from a re-encode.
Why we built this tool
The everyday uses are verification ones: confirming a UI change touched only what it was supposed to touch, checking a rebuilt asset against the approved version, spotting the one edited region in a retouched photograph, or working out whether a design export really matches the mockup.
The images involved are usually screenshots, and screenshots are full of things you would rather not upload — customer records, internal dashboards, unreleased designs, email inboxes caught in the frame. Comparing them on someone else's server means handing over two copies of all of it. This tool decodes and compares both images on a canvas in your browser, using your own CPU. Nothing is uploaded, nothing is kept, and the only limit is your device's memory.
Tips and common mistakes
- Keep 'ignore antialiasing' on for screenshots and rendered text — otherwise every glyph edge shows up as a difference.
- A diff that reports 100% similarity only means nothing exceeded your tolerances; raise the sensitivity before concluding two files are identical.
- Comparing images of different sizes always resamples one of them, which adds differences that were never in the source. Crop to the common area when you can.
- Two JPEGs saved from the same original will never be pixel-identical. Judge them by PSNR and SSIM, not by the raw count of changed pixels.
- Capture screenshots at the same device pixel ratio and window width, or you will spend your time diffing layout reflow rather than the change you made.
Quick start: using Image Diff
- Load the original image on the left and the modified one on the right — drag and drop, click to choose, or paste from the clipboard.
- Pick a sensitivity, and leave 'ignore antialiasing' on if you are comparing screenshots or rendered text.
- Run the comparison and read the summary: similarity, changed pixels, and how many separate regions changed.
- Switch views to understand the change — overlay and swipe for position shifts, difference or heatmap for what moved, flicker for changes the eye keeps missing.
- Click a region to zoom straight to it, then export the diff image or the full HTML report for a bug ticket.
If the two images are different sizes, decide deliberately how to handle it: cropping to the common area avoids resampling artifacts, while stretching keeps the whole frame at the cost of some invented difference. To normalise sizes beforehand, use Resize Image or Crop Image; to check whether two files differ in metadata rather than pixels, use Extract EXIF. For comparing text or code rather than pictures, use Diff Checker.