Free browser tool

Image diff heatmap

Visualize pixel differences between two images as a heatmap.

Input and settings

How to use it

Resize two images to a common comparison canvas, calculate RGB pixel differences, and create a PNG heatmap that highlights changed areas. The tool also reports an average-difference value.

Choose Image A and Image B.
Select Run.
Review the average difference and heatmap, then download diff-heatmap.png if needed.

Comparison size: Uses the smaller width and smaller height from the two images
Pixel difference: Mean absolute difference of R/G/B
Average difference: Mean of all per-pixel differences
Output: PNG heatmap

Small edits stay localized while the average remains relatively low

If two screenshots are identical except for a changed text color, the altered area becomes more prominent in the heatmap while unchanged regions stay low-difference.

When dimensions or aspect ratios differ, both images are scaled to the shared canvas first. That scaling can create differences of its own, so align crop and dimensions before precision comparisons.

Average difference is based on RGB distance from 0 to 255

For each pixel, the tool takes absolute differences in red, green and blue, then averages those three values. The displayed average is the mean across all compared pixels.

More red indicates a larger difference

The visualization maps stronger differences toward a stronger red component, making concentrated change areas easier to locate visually.

Different-size images are drawn into one common size

The canvas uses the smaller width and smaller height. Each full source image is drawn into that rectangle, so a mismatched aspect ratio can introduce geometric distortion.

Alpha itself is not part of the difference formula

The comparison uses RGB channels. A change that exists only in transparency is therefore not fully represented by this metric.