About the Image Diff
Two screenshots that should be identical, and one of them is wrong somewhere. Finding that difference by looking back and forth between browser tabs does not work — the eye is very good at motion and very bad at spotting a two-pixel shift in a border radius.
This tool compares two images three ways: side by side for context, blended overlay for alignment, and a pixel-level difference highlight that marks every changed pixel in red and reports what percentage of the image moved.
When you'd use it
- Confirming a CSS change affected only the component you intended to touch.
- Catching visual regressions between a baseline screenshot and a new build.
- Checking whether an image export actually changed after a compression or format change.
- Verifying a design implementation against the mockup by overlaying the two.
- Comparing rendering between two browsers or two device widths.
The three modes
Each mode answers a different question, and in a real investigation you usually use two of them.
- Side by side — shows both images at once. Best for a first look and for changes large enough to see.
- Overlay — blends the images with an opacity slider. Best for alignment problems: drag the slider and misaligned elements appear to shift while aligned ones stay still.
- Diff highlight — dims both images and paints changed pixels red. Best for finding small changes you would otherwise miss, and it reports the changed-pixel percentage.
Reading the changed-pixel percentage
The percentage is the share of compared pixels whose colour values differ. It is a blunt instrument and should be read as a signal, not a score.
A tiny percentage with the red pixels clustered in one place is a real, localised change — a moved button, a changed icon. A tiny percentage scattered evenly across the whole image is usually JPEG compression noise or anti-aliasing, not a change anyone can see. A large percentage often means a global shift: everything moved down four pixels because an element above grew, and every pixel below it now differs.
Why lossy formats produce false positives
JPEG and lossy WebP do not store exact pixel values. Re-encoding an unchanged image produces slightly different pixels every time, so two JPEG exports of the same source can diff at a few percent with nothing visibly different.
For visual regression work, capture and compare PNG, which is lossless. If you have to compare JPEGs, treat scattered low-level noise as background and look for clusters.
Images of different sizes
When the two images have different dimensions there is no pixel-to-pixel correspondence outside the overlapping region, and any comparison of the rest is meaningless. The tool compares the overlapping area and flags the size mismatch, because a size difference is itself usually the finding — a screenshot taken at a different viewport width or device pixel ratio.
Frequently asked questions
- Which formats are supported?
- Anything your browser can decode: PNG, JPEG, WebP, GIF, BMP, and SVG. SVG is rasterised at its natural size before comparison.
- Are the images uploaded?
- No. They are decoded into a canvas element in your browser and compared there. Nothing is sent anywhere, which is why the tool is safe to use on unreleased design work and screenshots containing customer data.
- Everything is red but the images look the same. What happened?
- Either the images are different sizes and the content is offset, or one has an alpha channel and the other does not, or you are comparing two JPEG re-encodes. Check the reported dimensions first.
- Can it ignore small differences?
- The comparison is exact — any difference in a pixel's value marks it. There is no tolerance threshold, so anti-aliasing along curved edges will show up. That is by design: a threshold that hides anti-aliasing also hides genuine one-pixel shifts.
- How large can the images be?
- Large images work but consume memory proportional to width times height, since both are held as raw pixel data. Multi-megapixel comparisons are fine on a desktop; on a phone, very large images may fail to allocate.