Image Pixel-Diff / Visual Regression Checker
Analyzes two images pixel by pixel and calculates the percentage of pixels that differ, producing a highlighted diff image that marks every difference in a bright color over a dimmed version of the first image — useful for visual regression testing, to confirm a design or UI change didn't introduce unintended differences. Unlike the Image Compare tool, which only shows an interactive before/after slider with no automatic difference detection, this tool computes the difference numerically. Adjust the detection sensitivity, and if the two images are different sizes, only the area they have in common is compared.
Both images are compared entirely on your device — neither is ever uploaded to a server.
A raw pixel-by-pixel comparison — useful for catching visual regressions, not a substitute for careful human review.
First image (baseline)
Drag an image here or choose one
Second image (comparison)
Drag an image here or choose one
Diff result
What this tool does
Compares two images pixel by pixel, reports the proportion that differ, and produces a difference image highlighting where. The threshold is adjustable so trivial variation can be ignored.
When to use it
- You are checking whether a code change altered an interface's appearance — a visual regression check.
- You are comparing before-and-after screenshots to see what an update changed.
- You want to confirm two apparently identical images really are identical.
- You are examining what re-encoding did to an image's pixels.
How to use it
- Put the first image in its slot and the second in its slot.
- Set the threshold: a higher one ignores small colour variations.
- Run the comparison and read the "Pixels that differ" figure.
- Use "Download diff image" if you want to keep the visualisation.
A practical example
Input
Two screenshots of the same page before and after a styling change, at a moderate threshold.
Output
A percentage of differing pixels, and a diff image highlighting the area that changed while leaving the matching parts faint.
Limitations
- The comparison covers the overlapping area of the two images; differing dimensions mean the excess is not compared.
- The comparison is arithmetic on colour values, not perceptual: a colour difference your eye cannot see may count as a difference, and vice versa. This is a sanity check, not a perceptual similarity metric.
- Shifting an image by a single pixel produces a large difference even though the content looks identical.
- Lossily compressed images carry artefacts that inflate the difference without any real change.
Privacy and processing
Both images are compared entirely on your device and neither is ever uploaded.
Technical notes
- The difference is a Euclidean distance between the two pixels' colour values, compared against the threshold you set.
- The maths is written as pure functions independent of the canvas and covered by unit tests.
Frequently Asked Questions
The Image Compare tool only shows a manual before/after slider for visual comparison, while this tool automatically computes the difference pixel by pixel and shows a precise percentage plus a highlighted image marking every difference.