What does the threshold setting control in diff mode?

It controls sensitivity. A value near 0 flags any difference, including JPEG compression artifacts. The default of 0.10 ignores anti-aliasing noise while still catching real, visible changes.

What does the similarity percentage actually mean?

It's the share of pixels that match within your chosen threshold. 95% similarity on a 2000×1500px image is still 150,000 differing pixels — significant even when the images look identical to the naked eye.

Can I compare two images with different dimensions?

Yes. Diff and Overlay scale the smaller image up to match the larger one before comparing. Side by Side is the most accurate choice when the dimensions differ substantially.

What's the difference between the slider, side-by-side, diff and overlay modes?

Slider and Side by Side are for visual review — great for design or photo comparisons. Diff highlights exact pixel-level changes and gives you a similarity score, ideal for regression testing. Overlay fades one image over the other, which is best for spotting position shifts.

How do I use this for visual regression testing?

Load your "before" screenshot as Image A and your "after" screenshot as Image B, then switch to Diff mode. The similarity score and highlighted diff map show exactly what changed after a code deploy or design update.

Image Compare

Free image comparison tool — side by side, before/after slider, pixel diff highlight, and overlay fade. 100% browser-based, no upload, no signup required.

Updated May 2026

Image A (Before / Original)

Drop image A or browse

PNG, JPG, WebP, GIF, SVG, AVIF

Image B (After / Modified)

Drop image B or browse

PNG, JPG, WebP, GIF, SVG, AVIF

How to compare two images online

Four modes, zero upload

1. Upload both images

Image A is the "before"; Image B is the "after." Supports JPG, PNG, WebP, GIF, SVG and AVIF.

2. Pick a comparison mode

Slider, Side by Side, Diff, or Overlay — switch anytime without re-uploading.

3. Analyze and export

Tune the diff threshold and highlight color, or adjust overlay opacity. Download the diff map as a PNG.

What this image comparison tool does

Pixel-by-pixel diffing with perceptual color distance

Four comparison modes in one tool

Before/after slider, side-by-side, pixel diff, and opacity overlay — switch between them without reloading your images.

Perceptual pixel diff (YIQ)

Uses a YIQ color-distance algorithm that mirrors how the human eye perceives differences, instead of a raw byte-for-byte comparison.

Built-in analysis panel

See similarity percentage, number of differing pixels, and total pixel count the moment the diff finishes running.

Adjustable sensitivity and highlight color

Raise the threshold to ignore JPEG compression noise, or lower it to catch every single pixel-level change.

Magnifier loupe for close inspection

Hover with the loupe enabled to zoom into any region at 2.5x, in any of the four modes.

100% client-side processing

Both images are decoded and compared with the Canvas API in your browser — nothing is ever uploaded to a server.

The four comparison modes

Mode

Best for

Before/After Slider

Photo retouching, redesigns, visual transformations

Side by Side

Quick general comparison, images with different content

Diff

Visual regression testing, detecting exact pixel changes

Overlay

Spotting position shifts and structural differences

When you'll reach for this tool

The most common scenarios among people who use it

Visual regression testing

Compare UI screenshots before and after a deploy — subtle layout or styling shifts get caught at the pixel level.

Photo retouch review

Use the slider to reveal exactly what changed between a raw draft and the final export.

Design iteration review

Load two Figma exports side by side and see precisely what moved, resized, or recolored.

Compression quality check

Compare an original PNG against a JPEG/WebP export to spot which areas lost quality.

Before/after showcases

Build renovation, product, or transformation comparisons for clients and marketing decks with a clean slider view.

Common mistake? Start here

Comparing screenshots taken at different zoom levels or resolutions

The tool scales the smaller image to match, so a 1x and a 2x screenshot of the same page will show a huge diff even if nothing actually changed. Capture both at the same resolution and DPR.

Comparing images with very different dimensions

Diff and Overlay work best when both images share the same dimensions — for very different sizes, use Side by Side instead.

Assuming 98% similarity means the images are nearly identical

On a 1000×1000 image, that's still 20,000 differing pixels — more than it sounds like at a glance.

Setting the threshold too low and catching JPEG noise

Values close to 0 flag even compression artifacts as differences — the default of 0.10 filters that noise out while still catching real changes.

Why use this image comparison tool

It packs four comparison modes — slider, side by side, pixel diff, and overlay — into a single tool, covering everything from a quick visual check to a precise pixel-level analysis.

The YIQ perceptual diff algorithm mirrors how the human eye actually perceives color differences, instead of a raw binary byte comparison that would flag irrelevant compression noise as a real change.

Frequently asked questions

No. Both images load through the browser's File API, and every mode — including the diff analysis — runs entirely on your device using the Canvas API. Nothing leaves your browser.

Resources

MDN — Canvas API

Full reference for the Canvas API used here for pixel-level image manipulation.

pixelmatch — npm

The open-source pixel comparison library that powers the Diff mode.