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.