Pixel difference
Heatmap of differences between two images.
This runs in your browser. Nothing is uploaded.
About Pixel difference
Compares two images pixel by pixel and renders the result as a heatmap, blue where they match and red where they do not, computed entirely inside your browser.
Some questions are impossible to answer by eye. Did that export actually change anything. Did the CMS re-compress the upload. Is this the same screenshot as yesterday's, or did a padding value shift by a pixel. Has someone edited this photo. Staring at two near-identical images tells you very little, and eyes are especially bad at catching small uniform changes across a whole frame.
Load both images and the tool walks every pixel in the overlapping area, sums the absolute difference across the red, green and blue channels, and maps that total onto a colour: identical pixels come out solid blue, and the more two pixels disagree the redder that spot becomes. The difference is amplified so faint changes are still visible, and the heatmap can be downloaded as a PNG.
That amplification means this answers where rather than how much. Compression noise too subtle to see will still glow faintly, and there is no numeric score or tolerance threshold to filter it out. Alignment is also taken literally: shift one image by a single pixel and the entire frame lights up, because every pixel now has a different neighbour underneath it.
How to use Pixel difference
- 1Drop the first image onto the panel.
- 2Click Add second image and load the one you are comparing against.
- 3Click Compare to render the difference heatmap.
- 4Click Download if you want to keep the heatmap as a PNG.
What it won't do
- Compares RGB values only; the alpha channel is ignored.
- No numeric difference score or tolerance setting.
- Requires pixel-aligned images; a one-pixel shift invalidates the result.
Common questions
How can I tell if two images are identical?
A result that is solid blue edge to edge means every pixel compared matched exactly on all three colour channels. Any red at all is a real difference. Two caveats: only the overlapping region is checked if the images are different sizes, and the alpha channel is ignored, so transparency differences will not show up.
Why does the whole image show up as different?
Almost always misalignment. If one image was cropped, resized, or shifted by even one pixel, every pixel is being compared against the wrong partner and the entire frame reads as changed. A global colour-profile difference does the same thing. Confirm both images are the same dimensions and came from the same crop before reading anything into the heatmap.
Does it give me a percentage difference between the images?
No. The output is visual only — a map of where the differences are, with brighter red meaning a larger difference at that point. There is no summary statistic, no pixel count and no pass or fail threshold. For automated regression testing with numeric tolerances you want a dedicated library in your test suite.
Can it compare images with different dimensions?
It will, but only the overlapping rectangle measured from the top-left corner is compared, and anything beyond that is discarded. That is useful for checking whether a crop kept its original pixels intact, and misleading for almost everything else. Match the dimensions first when you can.
Related tools
Why this one doesn't upload your file
There is no server to upload to. This page is a static file, and the work happens in your browser using the same graphics and WebAssembly code that renders every other site you visit. Your file is read from disk into memory, processed, and handed back as a download. Once the page has loaded you can disconnect from the network entirely and it keeps working. The longer explanation