ComparePicture

Screenshot comparison for visual regression

Baseline on the left, actual on the right. The UI Screenshot preset suppresses font-rendering noise, the ignore tool masks timestamps and ads, and the export gives you evidence for the ticket.

Private · Browser-based · No uploads

Two pictures in, every difference out.

  1. 1. Drop, paste or choose the earlier picture as A.
  2. 2. Add the later one as B — or drop both at once.
  3. 3. The comparison starts by itself; switch views any time.

PNG, JPEG, WebP, GIF (first frame), AVIF, BMP and HEIC where this browser can decode it. Different sizes are fine — they are aligned for you.

Both files are read by this page on your device. There is no upload step, because there is no server to upload to.

Or try an example pair

ABaselineChoose image Adrag & drop, or paste with Ctrl/⌘ VPress Enter to choose image A, or drop a file here.
BActualChoose image Bdrag & drop, or paste with Ctrl/⌘ VPress Enter to choose image B, or drop a file here.

A workflow that survives real screenshots

Visual regression fails in predictable ways. Each has a control here.

  • Text rendered with different anti-aliasing → Ignore anti-aliasing (on by default in the UI Screenshot preset).
  • A clock, an ad slot, a rotating banner → draw an ignore mask over it once; it applies to every number.
  • A scrollbar or a one-pixel frame → Ignore border.
  • A capture taken at a slightly different scroll position or device pixel ratio → auto-alignment finds the offset and scale.
  • Hundreds of single-pixel specks → raise the minimum region size.

Evidence that fits in a bug report

The JSON report records the dimensions, whether alignment was applied, the threshold, the number and percentage of changed pixels, every region with its box, and the structural metrics — the same shape a CI job would produce, generated in the page. Pair it with the transparent diff mask or the A | B | Diff strip.

Questions people ask

›How can I see differences between two screenshots?

Add the baseline as A and the new capture as B. The Difference view highlights changed pixels, the rail lists numbered change regions, and N / P step through them.

›Can it compare pages that scrolled?

If one capture is offset from the other, alignment estimates the shift and compares the overlapping part. If the page layout itself changed, the changes are reported as regions.