Image Diff Checker

Shipped a CSS tweak and want to know exactly what moved? Comparing two screenshots for a QA visual-regression check? Wondering what actually changed between two exported versions of the same photo? Scrolling back and forth between two images and squinting for differences is slow and unreliable — this tool overlays the two and shows you every changed pixel in one image.

The comparison is real pixel-diffing math, the same family of algorithm used by tools like pixelmatch: every pixel of both images is converted from RGB into YIQ color space (Y = luma, I and Q = the NTSC chrominance axes), and the Euclidean distance between the two YIQ points is computed. That distance is compared against a threshold set by the sensitivity slider — raise the sensitivity to catch subtle color shifts, lower it to ignore compression noise and care only about obvious changes.

A naive per-pixel comparison would light up every anti-aliased edge as "different" even when nothing meaningful changed, because smoothing shifts a handful of border pixels by a few shades. This tool runs a real anti-aliasing heuristic on both images: a pixel is only treated as a genuine difference if it does NOT sit inside a smoothing gradient — concretely, if its own 3x3 neighborhood in either source image does not already contain both a lighter and a darker pixel than itself, which is the fingerprint of an AA-smoothed edge rather than actual content.

Upload Image A and Image B, adjust the sensitivity if needed and press Execute. You get an exact percentage of pixels that differ plus a diff image with every real change highlighted in bright magenta over a dimmed version of the original — download it and attach it straight to your bug report or QA notes. Both images must share the same dimensions; if they don't, the tool tells you plainly instead of silently cropping or stretching one of them. Nothing leaves your browser at any point.