Image Difference Heatmap
Measure where two decoded images differ. Place image B relative to image A using whole-pixel X/Y offsets, choose how to treat transparency, and set a channel tolerance. The result reports the pixels actually compared, changed-pixel ratios and regional measurements, alongside a heatmap and an overlay on image A.
Key features
- Manually align image B with integer X/Y offsets; image A remains the coordinate reference.
- Require matching dimensions or explicitly compare the common overlap without scaling either image.
- Compare RGB appearance over white or black, or compare the four decoded RGBA channels directly.
- Report total and selected-region differences, plus a 4 × 4 region table and excluded pixel counts.
- Export the full-size heatmap or comparison overlay as PNG and the measurements as JSON.
- Cancel batch processing; changing a source or setting clears stale results and downloads.
How to use
- Choose reference image A and comparison image B, or load the generated PNG example.
- Set the tolerance, alpha policy and dimension policy. Adjust X/Y offsets if needed.
- Enter an optional region using image A coordinates, then select Compare pixels.
- Read the compared and excluded counts. Inspect the heatmap, overlay and region table before saving.
Use cases
- Check whether a UI screenshot changed in a small area after a layout edit.
- Locate decoded-pixel changes between two exported illustrations.
- Compare transparent assets against a chosen background or include the alpha channel explicitly.
- Measure one rectangular region while retaining the full overlapping-image comparison.
Frequently asked questions
How is a changed pixel counted?
For each aligned pair, the largest absolute channel difference is compared with the tolerance. A pixel changes only when that value is strictly greater than the tolerance. The changed ratio divides changed pixels by compared pixels. Mean error averages all compared channel differences; it is not thresholded.
What happens when image sizes differ?
The default rejects a dimension mismatch. Common-overlap mode compares only aligned pixels present in both images. Pixels outside that intersection are excluded, counted separately for A and B, and transparent in the maps. No image is resized or padded.
Is alignment automatic?
No. X/Y moves image B relative to A in whole pixels: positive X moves B right and positive Y moves it down. The region uses A coordinates. If there is no overlap, adjust the offsets. Automatic registration, rotation and perspective matching are outside this tool.
How are transparent pixels handled?
White or black mode composites each decoded RGB channel over that background before comparison. RGBA mode compares all four decoded channels, including alpha. Fully transparent colors can be altered by browser decoding, so RGBA is not a comparison of hidden original-file bytes.
What do the colors and downloaded files mean?
Compared pixels within tolerance are black on the heatmap. Changed pixels use blue through green to red as the maximum channel error increases from 0 to 255. Uncompared areas are transparent. The overlay mixes changed heat colors with image A. Both PNGs use A’s dimensions; JSON includes all settings and regional measurements.
Can I use large or private photos?
Files stay in page memory. Each image is limited to 8 MiB, 2 million pixels and 4,096 pixels per side. PNG, JPEG and still WebP are decoded by the browser. Cancel stops between batches; a browser decode or PNG encode already in progress may finish internally, but stale results are discarded.
Privacy
Selected images and settings are processed in this page’s memory, without uploading them to an analysis server or retaining them in browser storage. A file is downloaded only when you request it. Input changes, clearing and leaving the tool release temporary results and download URLs.
Comments & questions