Image diff

pixel-level visual compare · threshold + highlight

Drop exactly two images (A and B) and the tool produces a third that desaturates everything that's the same and paints any different pixels in your highlight colour. Includes a "% different" stat.

When to use this tool

Visual regression testing — "did anything change between these two screenshots?" Or design review — "what changed between these two mock-ups?" Or QA — "is the rendered page the same as the reference?"

Step by step

1. Drop image A first, then image B (the order matters only for naming; the diff is symmetric).
2. Pick a threshold. Lower = stricter (more pixels flagged). 12 is a good default that ignores tiny anti-aliasing noise.
3. Pick a highlight colour. The default magenta stands out on most images.
4. Click Diff. The output shows different pixels in the highlight colour, faded grayscale elsewhere, plus a percentage.

Use cases

• Visual regression. Capture before / after screenshots of a page; diff to confirm nothing visual changed.
• Design comparison. Two versions of a mock-up — what's different?
• Compression QA. Compare a JPG-encoded version to the original PNG; see where artefacts appear.

FAQ