Image Diff: Pixel Comparison with Heatmap
Load a base image and a comparison image to find out exactly which pixels changed and what percentage differs. Useful for catching missed design edits, checking screenshots for regressions, and measuring compression loss. To eyeball two images with a draggable divider instead, use the Image Compare Slider.
🔒 Runs in your browser · Your data is never sent to a server
You can also drag and drop an image file here
You can also drag and drop an image file here
At 0%, any difference counts. Raise it to ignore small differences such as compression noise.
Load both images to start comparing.
Result
The two images have different sizes, so they are compared using the option you selected.
The images are large, so they were scaled down for the comparison (the rate is approximate).
- Difference rate
- Different pixels
- Max delta (0-255)
- Mean delta (0-255)
- Bounding box
How to use
- Load two images with "Choose the base image" and "Choose the comparison image" (drag & drop also works).
- If the sizes differ, pick an option under "When sizes differ".
- Adjust "Tolerance" and "Diff display" and check the difference rate and the diff map.
- Save the diff map with "Save diff as PNG".
Notes
- "Pad to the larger size" does not scale anything. The images are aligned at the top-left and missing areas count as transparent, so the margins show up as differences.
- "Scale to the larger image" stretches the other image to the size of the one with the larger area, ignoring aspect ratio. If the ratios differ, most pixels will be reported as different.
- A pixel is judged by its largest difference across red, green, blue, and alpha. This may not match how visible the difference is to the eye.
- Comparison is capped at 4,096px on the longest edge and 16 megapixels. Larger images are scaled down first.
- Animated GIFs use only their first frame.
Glossary
Pixel diff
Comparing pixels at the same position in two images and counting the ones that differ. It catches single-pixel changes that are hard to see by eye.
Heatmap
A picture that shows the size of a difference with color. Here, unchanged areas are black and larger differences shift from red toward yellow.
Difference rate
The share of all pixels that differ by more than the tolerance.
FAQ
How are images of different sizes compared?
"Pad to the larger size" aligns the images at the top-left without scaling and treats the missing area as transparent, so that margin shows up as a difference. "Scale to the larger image" stretches the other image to the size of the one with the larger area, ignoring aspect ratio.
What does the tolerance measure?
For each pixel, the largest difference across red, green, blue, and alpha (0-255) is compared with the value matching your tolerance (0-100%). Only pixels above it count as different. At 0%, any difference counts.
Two JPEGs look identical but show differences. Why?
JPEG changes pixel values slightly each time it is re-encoded, so images that look the same can still differ. Raising the tolerance to a few percent ignores that compression noise and surfaces only visible changes.
What is the difference between Heatmap and Highlight?
Heatmap draws unchanged areas in black and larger differences from red toward yellow. Highlight shows the base image in pale gray and overlays only the differing pixels in red, which makes it easier to see where the change is.
Share this page