How does the threshold slider work?

Threshold controls the per-channel color distance pixelmatch considers a mismatch. Lower values surface subtle shifts, while higher values ignore minor rendering noise.

Can I align images that are different sizes?

Yes. The canvas centers both inputs after optional downscaling. If compositions differ drastically, crop or recapture screenshots so key regions overlap before diffing.

Where can I learn advanced techniques?

Pair this explainer with the Image Diff tool to experiment. Teams running automated suites can script the same pixelmatch algorithm in CI to mirror the browser results.

Ads disabled until consent granted.

Browser tool

Image Diff (Visual Regression) — About

Learn how the swipe overlay, heatmap rendering, and download options behave so you can run regression reviews with confidence.

This page expands on the workflow behind the Image Diff comparison tool, covering how pixelmatch drives results, when to tweak downscaling, and how to debug unexpected highlights.

Key points

Pixelmatch accuracy explained

Get clarity on how threshold, anti-alias detection, and diff coloring work so you can interpret hotspots confidently.

Local-first processing

Images never leave your browser. Comparisons run entirely in WebAssembly and Canvas APIs with no external services involved.

Collaboration-ready exports

Save overlay snapshots, diff-only heatmaps, or packaged ZIPs to share findings with QA teams, stakeholders, or CI reports.

Why visual diffs matter

UI regressions often hide in small offsets or font rendering changes that code reviews miss. A repeatable visual diff lets engineers, designers, and QA leads validate releases quickly without digging through verbose pixelmatch logs.

Because everything runs locally, you can review confidential product updates before launch without exposing screenshots to external services.

Deep dive into the algorithm

Pixelmatch compares red, green, blue, and alpha channels for every pixel. It calculates color distance, applies your threshold, and flags mismatches into a binary mask. Anti-alias detection filters out subtle sub-pixel blending so the heatmap highlights meaningful changes.

The swipe overlay layers both images using CSS transforms so you can inspect typography, spacing, and animation states interactively while the diff mask stays available in the sidebar preview.

Workflow recommendations

Downscale 4K or ultra-wide screenshots to 50% for faster processing without losing visual fidelity.
Toggle anti-alias detection when testing browsers with different rendering engines to avoid false positives.
Export the diff PNG and baseline overlay when filing tickets so teammates can replicate findings quickly.
Archive comparison pairs in version control if you want a paper trail of before/after states across releases.

Roadmap and support

Planned improvements include keyboard shortcuts for scrubber control, side-by-side diff modes, and annotations on exported artifacts. Reach out through the contact links in the footer if your team needs enterprise-focused features.

Ads disabled until consent granted.

How to use this tool

Step 1
What happens during a diff
The tool normalizes both images, scales them according to your downscale setting, and feeds pixel buffers into pixelmatch to calculate differences.
Step 2
Interpreting the results
Use the swipe overlay to verify layout shifts, then inspect the heatmap to distinguish anti-aliasing noise from true regressions before exporting artifacts.
Step 3
Known limitations
Animated formats compare the first frame only, and extremely large screenshots may require downscaling to avoid memory pressure in the browser.

Frequently asked questions

How does the threshold slider work?: Threshold controls the per-channel color distance pixelmatch considers a mismatch. Lower values surface subtle shifts, while higher values ignore minor rendering noise.
Can I align images that are different sizes?: Yes. The canvas centers both inputs after optional downscaling. If compositions differ drastically, crop or recapture screenshots so key regions overlap before diffing.
Where can I learn advanced techniques?: Pair this explainer with the Image Diff tool to experiment. Teams running automated suites can script the same pixelmatch algorithm in CI to mirror the browser results.

For the most accurate comparisons, capture baseline and candidate screenshots at the same viewport size. Close other heavy tabs if you notice the browser throttling canvas rendering when diffing very large images.