Ads disabled until consent granted.

Browser tool

Image Diff (Visual Regression)

Spot visual differences between design revisions or screenshots.

Drop in two screenshots or design exports to catch visual regressions instantly. The swipe overlay and heatmap diff make it easy to separate intentional tweaks from unexpected changes.

Key points

Swipe overlay for instant comparisons

Drag a handle to scrub between baseline and comparison images without leaving the browser. Alignment stays synced even when resolutions differ.

Pixelmatch-powered heatmap

Highlight mismatched pixels with adjustable thresholds and anti-alias detection to separate noise from real regressions.

Downloadable diff artifacts

Export the heatmap as a PNG for bug reports, CI dashboards, or design reviews with a single click.

Baseline image

Drop your reference screenshot or design export.

Drag & drop an image here

Supports PNG, JPEG, WebP, GIF, AVIF, and BMP. Files never leave your browser.

Or choose a file from your device

Comparison image

Drop the new build or alternate design you want to check.

Drag & drop an image here

Supports PNG, JPEG, WebP, GIF, AVIF, and BMP. Files never leave your browser.

Or choose a file from your device

Upload two images above to compute a visual regression diff. PNG, JPEG, WebP, AVIF, and GIF are fully supported.

Ads disabled until consent granted.

How to use this tool

  1. Step 1

    Add your baseline and comparison images

    Drop or browse for PNG, JPEG, WebP, AVIF, GIF, or BMP files. For huge screenshots, pick a downscale option to process them faster.
  2. Step 2

    Tune the diff sensitivity

    Adjust the threshold slider and optional anti-alias detection to focus on meaningful differences while ignoring rendering noise.
  3. Step 3

    Review and export the results

    Use the swipe overlay and heatmap to validate changes. Download the diff PNG when you are ready to share the findings.

Frequently asked questions

Do my images leave the browser?
No. All processing, including pixelmatch diffing and previews, runs entirely in your browser. Nothing is uploaded to a server.
Why are the images different sizes?
The tool scales both images using the selected downscale percentage and pads smaller images within the diff canvas. If the layouts differ significantly, align your screenshots before diffing.
Which formats are supported?
Common raster formats including PNG, JPEG, WebP, AVIF, GIF, and BMP are supported. Animated formats are compared using the first frame.

For best accuracy, capture screenshots at the same viewport size. Extremely large images can be downscaled within the tool to conserve memory while keeping proportions intact.

Image Diff (Visual Regression) — WebUtility.org | WebUtility.org