How is the per-pixel difference measured?

For each pixel the tool reads the red, green, blue and alpha channels from both images and computes a color distance. If that distance exceeds your tolerance, the pixel is counted as different and painted red in the output. The mismatch percentage is differing pixels divided by total pixels.

What if the two images are different sizes?

Pixel comparison requires matching dimensions, so the tool compares the overlapping region using the smaller width and height and tells you the sizes differ. Resize one image to match the other for a full comparison.

Why set a tolerance instead of exact match?

Lossy formats like JPEG and anti-aliased text introduce tiny color variations that are invisible to the eye but differ bit-for-bit. A small tolerance ignores that noise so the diff highlights only meaningful changes, the way visual regression tools do.

Can it ignore anti-aliasing?

The tolerance threshold is the main control: raising it suppresses single-pixel edge differences caused by anti-aliasing and sub-pixel rendering. For pixel-perfect assets, set the tolerance to zero to catch every change.

Are my images uploaded anywhere?

No. Both images are decoded and compared entirely in your browser using the Canvas API. No image data is transmitted, so the tool works offline and your screenshots stay private.

Image Diff (Pixel-Level)

Compare two images pixel by pixel and see exactly where they differ — the mismatch percentage plus a diff image with changed pixels painted red. It works the way visual regression tools do, with a tolerance to absorb JPEG noise and anti-aliasing. Everything runs on a canvas in your browser; no image is uploaded.

How it works

Each image is drawn onto a hidden <canvas> and its raw pixels are read with getImageData, giving a flat array of red, green, blue and alpha values — four bytes per pixel.

For every pixel the tool computes a color distance between the two images. A simple and robust measure is the sum of absolute channel differences:

distance = |ΔR| + |ΔG| + |ΔB| + |ΔA|

If the distance exceeds your tolerance threshold, the pixel is counted as different and painted bright red over a dimmed copy of the baseline; otherwise it is left faint. The headline number is:

mismatch % = differing pixels ÷ total pixels × 100

When the two images have different dimensions, only the overlapping top-left region (the smaller width and height) can be compared, and the tool tells you the sizes differ.

Why a tolerance

Lossy formats and anti-aliased edges introduce tiny, invisible color shifts. A small tolerance — say a distance of 10–30 — treats those as “same” so the diff highlights only changes a person would notice. For pixel-perfect assets such as icons, set the tolerance to 0 to catch every altered byte.

Tips

For screenshot regression testing, capture both images at the same scale and device pixel ratio, or every edge will register as a difference.
A high mismatch percentage with no obvious visual change usually means a sub-pixel shift — try a higher tolerance, or align the images first.
Transparent regions are compared on their alpha channel too, so a change from opaque to transparent is detected even when the visible color is similar.