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.