Pixel Diff

Use Diff to spot small changes in spacing, color, text, and layout in an A/B comparison.

Inspect a change

1. Capture A and B. Matching viewport settings and browser zoom help isolate changes, but different image sizes also support Diff.
2. Open Diff in the editor when it is available.
3. Use 100% to inspect actual pixels, or return to A / B for context.
4. Add notes to B and export the Diff view.

The changed percentage describes pixel differences between the images. Use it alongside the highlighted areas to decide which changes matter.

When Diff is available

Completed A/B comparisons support Diff even when viewport settings or image dimensions differ, including responsive captures and imported design images. Different-size comparisons start side by side; choose Diff to calculate their pixel differences within the supported image limits.

Diff keeps both images at native size and aligns them from the top-left.

• Overlapping pixels are compared directly.
• Areas present in only one image count as changed.
• Space outside both images is ignored.

Layout reflow or different export scales can produce a large percentage without indicating a defect. SnapDiff does not stretch images or align page elements automatically.

Pixel Diff is free on Chrome and Firefox. Multi groups always use side-by-side review without pixel Diff.

When one side is an imported design image, export it at the same scale as the browser capture for a useful comparison. A 2x design export and a 1x capture can still use Diff, but the scale difference is not corrected automatically.

Keep the page state consistent

Wait for fonts and images to load, and capture the same scroll position. Moving content, timestamps, and animations can appear as changes too.

Matching viewport settings and zoom reduce layout noise. Use side-by-side review for additional context or for Multi groups, which do not have pixel Diff.

Diff shows B's annotations. Your annotations on A remain saved in the comparison.