Screenshot comparison tools

"Screenshot comparison tool" describes three quite different things, and picking from the wrong layer is the usual mistake. You may want a library to call from your own code, a CLI that manages baselines, or a platform where a team reviews and approves differences.

Libraries: a diff function

import { readFileSync, writeFileSync } from "node:fs";
import { PNG } from "pngjs";
import pixelmatch from "pixelmatch";

const baseline = PNG.sync.read(readFileSync("baseline.png"));
const current = PNG.sync.read(readFileSync("current.png"));
const { width, height } = baseline;
const diff = new PNG({ width, height });

const changed = pixelmatch(baseline.data, current.data, diff.data, width, height, {
  threshold: 0.1,      // per-pixel colour tolerance
  includeAA: false,    // ignore anti-aliased pixels
});

writeFileSync("diff.png", PNG.sync.write(diff));
console.log(`${changed} pixels differ (${((changed / (width * height)) * 100).toFixed(2)}%)`);

ODiff (MIT, 3.2k stars) is the alternative worth knowing when volume is the constraint. It is a native binary — originally OCaml, since rewritten in Zig with SIMD optimisations, so older comparisons describing it as an OCaml tool are out of date. Its README benchmarks a full-size website screenshot comparison at roughly 1.17s against pixelmatch's 7.71s, and claims about 6x the speed of both ImageMagick and pixelmatch. If you are diffing thousands of full-page captures a day, that difference is CI minutes. Resemble.js is the older browser-capable option, useful when the comparison has to happen client-side.

CLIs: diffing plus baselines

Platforms: comparison plus a review workflow

Once more than one person needs to judge a difference, a static HTML report stops being enough. You need somewhere differences are ranked, discussed, and approved with a record of who approved them. That is what the hosted tools sell, and it is a real product rather than a wrapper around a diff.

• Argos — free to 5,000 screenshots/mo, then $100/mo for 35,000. Open-source core, cheapest hosted review UI.
• Chromatic — free to 5,000 billed snapshots (Chrome only), Starter $179/mo. Best-in-class if coverage lives in Storybook.
• Applitools — Starter $667/mo billed annually. Perceptual comparison rather than pixel diffing.
• Percy — free to 5,000 screenshots/mo; paid tiers are contact-sales and the pricing page returned a 404 when checked.

Full breakdown of each in 10 visual regression testing tools, compared.

Choosing your layer

1. 01You are writing a script and need a diff — pixelmatch, or ODiff if the images are large and numerous.
2. 02You already capture screenshots and need baselines — reg-suit.
3. 03You need capture and comparison, self-hosted — BackstopJS, with the maintenance caveat noted.
4. 04More than one person reviews the differences — a platform. The review workflow is the product.
5. 05Nobody wants to author the captures — that is a different problem: coverage, not comparison.

That last point is the one worth sitting with. Every tool above assumes you already know which screenshots to take. If your real gap is that nobody has time to write and maintain that list, no comparison tool at any layer solves it — see screenshot testing vs visual regression testing.