Compare two images with pixelmatch — overlay, slider, and blink views, a sensitivity threshold, ignore regions, and an exportable diff report.
Content last reviewed
Upload Image A
Baseline / Before
Upload Image B
Current / After
Upload the before and after versions — screenshots, exports, or photos.
Pick a view mode, set the sensitivity threshold, choose the highlight colour, and draw ignore regions if needed.
Changed pixels light up, stats report the exact difference, and the overlay or JSON report exports.
Two full-page screenshots at identical window size, compared at a moderate threshold.
Input
before.png and after.png (both 1440×2800) · threshold 10% · red highlightOutput
The intended button change lights up — and so does an unintended 2px shift in the footer; stats report the exact pixel count and percentageA visible clock would register as a difference every time, so it is excluded.
Input
Two dashboard screenshots · ignore rectangle drawn over the timestamp areaOutput
The comparison reports only real layout changes; the masked region is skipped in the count and the JSON reportAre these two images identical — and if not, where exactly do they differ? Eyeballing screenshots side by side fails at precisely the moments it matters: a one-pixel layout shift, a subtly changed colour, an export that may or may not match the previous version. This tool answers definitively, using pixelmatch — the same comparison engine behind many CI screenshot tests — running in your browser.
Four view modes suit different questions. The overlay paints every differing pixel in a highlight colour you choose; side-by-side shows both sources; the slider mode wipes between them under your cursor; and blink alternates the two rapidly, the classic technique that makes even tiny changes jump out. A threshold slider controls sensitivity — at low values sub-visible encoding noise registers, at higher values only human-visible changes survive — and you can drag ignore rectangles over regions that legitimately differ (timestamps, ads, animated corners) to exclude them from the count.
The verdict comes as numbers, not vibes: differing pixels, total pixels, and the difference percentage, with the diff overlay downloadable as PNG and the statistics copyable as a JSON report for tickets and reviews. Both images stay on your machine throughout, so unreleased designs and internal-tool screenshots are safe to compare.
Upload the first (before) and second (after) images. Comparison runs automatically once both are loaded.
Pick a view mode: Overlay (differences highlighted), Side-by-side, Slider (wipe between versions), or Blink (rapid alternation).
Set the threshold — lower catches everything including compression noise; higher surfaces only clearly visible changes — and choose a highlight colour that contrasts with your images.
If parts of the images differ legitimately (clocks, ads), draw ignore regions over them; they are excluded from the comparison.
Read the stats — differing pixels, total, and percentage — then download the diff overlay as PNG or copy the JSON report for a ticket or review thread.
The comparison library used by CI visual-regression suites, running client-side on your two images.
Highlighted overlay, side-by-side, cursor-controlled slider wipe, and blink alternation.
A sensitivity slider separating sub-visible encoding noise from human-visible change.
Draw rectangles over legitimately dynamic areas — timestamps, ads — to exclude them from the diff.
Differing pixels, totals, and percentage to four decimals — a number, not an impression.
Download the diff overlay as PNG or copy a JSON report of the comparison.
Confirm a CSS or component change had no unintended side effects elsewhere on the page.
See everything that changed between two exports — including what the changelog didn't mention.
Compare the same page captured in two browsers and quantify where they disagree.
Prove an exported or re-encoded image still matches its source.
Reveal exactly which regions of a photo were retouched.
Both images are drawn onto canvases sized to the larger of the two (a smaller image leaves its undrawn remainder, which registers as difference — matching sizes give the cleanest comparison). Any ignore rectangles are masked out on both sides, then pixelmatch walks the two pixel buffers, comparing colours in a perceptual colour space with anti-aliasing awareness, and writes differing pixels into a diff image in your chosen highlight colour.
The threshold maps to pixelmatch's sensitivity: near zero, single-value channel shifts from JPEG re-encoding count; higher, only differences a person would notice survive. The result is rendered as the overlay, and the counts — differing pixels over total — become the stats and the JSON report. Slider and blink modes present the same two sources interactively rather than re-computing anything.
PNG, JPG, WebP and other browser-decodable formats for both sides; screenshots and exports are the typical diet.
The diff overlay downloads as diff_overlay.png; the statistics copy as a JSON report.
Overlay, side-by-side, slider wipe, or blink alternation.
Sensitivity of the comparison — low for pixel-exact equality checks, higher for layout-level review.
The colour differing pixels are painted in; pick one that contrasts with the content.
Draw, keep, and clear rectangles that are excluded from the comparison on both images.
They are real, just sub-visible: JPEG re-encoding shifts values, anti-aliasing renders differently across machines, colour profiles nudge channels. Raise the threshold to surface only human-visible change.
The images are different sizes — the smaller one's missing area counts as changed. Recapture both at identical window size and zoom, or resize one to match before comparing.
Usually one image is a re-encode or re-render of the whole frame (different zoom, different device pixel ratio). Confirm both captures came from the same viewport settings.
Pixel comparison answers "which pixels differ", not "what does it mean" — a global 1-pixel scroll offset lights up the entire page even though only one thing happened, and the tool does not attempt structural or perceptual grouping of changes. Differently sized images are compared on the union canvas, so size mismatches read as large diffs. Very large images are processed in browser memory and take proportionally longer. Ignore regions are rectangles; irregular dynamic areas need covering with several.
Both images, the comparison, and the diff rendering stay in your browser — nothing uploads, which is why screenshots of unreleased features and internal tools are safe here. The JSON report only leaves the page when you copy and paste it somewhere yourself.
Capture both screenshots at identical window size, zoom, and device-pixel-ratio.
Mask legitimately dynamic regions with ignore rectangles instead of raising the threshold globally.
Use blink mode for finding tiny changes by eye; use the overlay for documenting them.
Pick a highlight colour that contrasts with the dominant colours of the screenshots.
Attach the PNG overlay and JSON report to reviews — a quantified diff ends debates.
Standardize the capture step: a fixed browser window size and zoom for before/after screenshots turns visual diffing from an approximate art into a repeatable check. Teams that screenshot at a known viewport can diff any two builds of a page at will.
Separate signal from noise deliberately. Ignore rectangles handle the known-dynamic regions; the threshold handles encoding-level noise; what remains highlighted is the actual change. Investing thirty seconds in that setup makes the resulting diff trustworthy enough to attach to a pull request.
And let the numbers close the loop: "0 differing pixels outside the masked regions" is a verifiable statement about a UI change — the kind reviewers accept without re-testing. That is the CI visual-regression idea, available ad hoc.
Comparison uses the pixelmatch library on ImageData buffers from two canvases sized to the maximum dimensions of the pair; ignore rectangles are filled black on both canvases before comparison so they contribute zero difference. The threshold slider maps to pixelmatch's 0–1 threshold; the diff colour is passed as its diffColor with a dimmed base. Stats derive from the returned changed-pixel count over the canvas area. Overlay export uses canvas.toBlob → PNG; blink mode alternates at 500 ms. All processing is client-side.
| Mode | Shows | Best for |
|---|---|---|
| Overlay | Differing pixels painted in the highlight colour | Documenting exactly what changed |
| Side-by-side | Both images in full | Context and orientation |
| Slider | A cursor-controlled wipe between versions | Inspecting a specific region |
| Blink | Rapid alternation of the two | Spotting tiny changes by eye |
Developers verifying UI changes and hunting regressions, designers checking implemented pages against exports, QA comparing rendering across browsers and builds, and anyone who needs "did anything change?" answered with a number instead of a squint. It brings the CI screenshot-test workflow to one-off comparisons.
Because they exist below visibility: JPEG re-encoding shifts pixel values, anti-aliasing differs across GPUs and font stacks, and colour management nudges channels. Raise the threshold to filter that noise and keep only human-visible changes.
For a clean result, yes — the comparison runs on a canvas sized to the larger image, so a size mismatch registers its uncovered area as difference. Capture both at identical viewport settings, or resize one to match first.
Excluding parts that legitimately differ — timestamps, ads, animated corners — so they stop polluting the count. Draw rectangles over them and the comparison skips those areas on both images.
The comparison's sensitivity to per-pixel colour distance. Near zero, even one-value channel shifts count as different; higher settings require differences a person would notice. Match it to your question: exact equality low, layout review higher.
Yes — download the highlighted diff as diff_overlay.png, and copy the JSON report containing the pixel counts, percentage, and dimensions for tickets and reviews.
No — decoding, pixelmatch, and rendering all run in your browser. Unreleased designs and internal screenshots never leave your machine.