Spot the difference between two screenshots
A pixel diff answers 'what changed' between two versions of an image — a UI regression check, a before/after retouch, a doctored capture.
Tools used in this guide
The job
Two screenshots look identical until you overlay them. A difference map keeps the base image dimmed and paints changed pixels in a bright color, so a one-pixel shift or a swapped icon stands out immediately.
How to do it
Pick image A and image B, then compare. If the whole map lights up because of JPEG noise or a one-pixel offset, raise the sensitivity threshold until only the real change stays red.
- Screenshots of the same viewport at the same size give the cleanest diffs.
- When sizes differ, the second image is scaled to the first — so compare like-for-like crops when precision matters.
Worked example
Comparing two builds of a settings page shows a red rectangle where a button moved and scattered dots where anti-aliasing shifted — the difference percentage tells you whether it was a pixel-level tweak or a layout change.
Limits
The diff is pixel-exact, not semantic — a shifted element appears as a changed region, not a moved object. Animated GIFs are not supported; export a frame first. Scaling a mismatched B to A's size introduces real differences, so same-size inputs are always more honest.