Guides

Before-and-after screenshot comparison

Show exactly what changed between two UI states. SnapDiff brings capture, side-by-side comparison, pixel Diff, and annotations into a local browser workflow for QA, design, product, and development reviews.

By SnapDiff

Before-and-after screenshots with pixel Diff and annotations in SnapDiff.
Before-and-after review in the SnapDiff editor.

Compare staging and production in one workflow

Choose the expected state and the actual state you want to review. They can be in different tabs or on different domains, including a local development site and production. You do not need to install a site SDK, connect a repository, or create an account to use Free.

  1. Open SnapDiff on the reference page. Choose A/B and Viewport, Full page, or Area, then capture A - expected.
  2. Switch to the changed page or prepare the next state. Reopen SnapDiff and capture B. Keep each source tab visible until that capture finishes.
  3. Review A / B side by side. For compatible, same-size captures, switch to Diff to highlight pixel differences.
  4. Annotate the issue with arrows, rectangles, pen marks, or text. Export the comparison as one PNG, JPEG, or WebP image.

Make a pixel difference meaningful

Use the same viewport, zoom, and relevant page state for both screenshots. Wait for fonts and content where possible. A changed time label or animated banner can create a real pixel difference without representing a regression. SnapDiff highlights visual changes; you decide whether they are expected.

Images retain their original dimensions and use top-left alignment. Different device viewport sizes remain useful for side-by-side review, but do not produce a pixel Diff score. There is no automatic resizing to make screenshots match, and A/B is not a traffic-split experiment.

Review more than two UI states

Use a Multi group for 2-5 screenshots, such as a dialog sequence or desktop and mobile viewport layouts. Each image keeps its own annotations, labels, dimensions, and timestamp. Multi exports one combined side-by-side image and does not calculate a pixel Diff.

On Chrome, choose responsive viewport presets or simulate browser locales for sites that support them. These are not physical-device tests or automatic translations. Firefox supports A/B and Multi capture, but cannot create new simulated viewport or locale captures.

Send evidence without uploading your library

Saved screenshots and annotations stay in the browser profile where you captured them. Return through the Captures library to continue a review. Exports preserve native dimensions; PNG is lossless, while JPEG and WebP use high-quality lossy encoding. Large compositions may require PNG.

Attach exported images to your own issue tracker or review thread. SnapDiff has no automatic Jira, Slack, or GitHub sharing integration. Inspect sensitive page content before sharing; drawing over text is not a secure-redaction guarantee. Export important work before clearing storage or uninstalling.

Start with 20 Free workflows per month

A completed Single capture, A/B pair, or Multi group counts as one workflow. Editing, retakes, exports, and optional accessibility checks do not consume another workflow. Free includes full-quality exports with SnapDiff branding and capture timestamps.

Pro is $9.99 USD/year, plus applicable tax, with automatic annual renewal. It includes unlimited workflows, clean or custom watermarks, timestamp controls, and up to three browser installations. See pricing and checkout availability. Screenshots stay local; checkout and license validation use Dodo Payments separately.

Chrome 120+ is the full-feature baseline. Desktop Firefox 153+ is a limited-feature target, not a promise of a published store listing or complete browser parity. It does not support responsive presets or browser locale simulation, even with Pro. Read the browser support guide.