IMAGEDIFF: What Actually Changed
Two screenshots a release apart look identical until you learn that a logo moved four pixels, or that the whole frame drifted one step bluer because a colour profile changed on the way out. This compares them pixel by pixel, four ways to look and a paragraph of plain numbers: how many differ at all, how many differ enough for an eye, the largest move, where they are gathered, and which channels carried it. Both images stay in this tab.
The two images
PNG, JPEG, WebP, GIF, anything the browser can decode. Drop one on each side, or tap to choose.
Drop an image here, or tap
Drop an image here, or tap
What counts as different
A pixel is only counted when one of its three channels moves by more than this, out of 255. Leave it at zero to see every byte that changed, which is what you want when checking whether a file was re-encoded. Raise it to eight or so when comparing two photographs of the same thing, or two renders from different machines, where a small amount of noise is expected and is not the thing you are looking for.
Along the edge of any curve or letter, a renderer blends the edge colour into the background by how much of the pixel each side covers, and two renderers almost never land on the same blend. With this on, a differing pixel is discounted when three things hold at once: at least one of the two images has a blend here, meaning a brightness strictly between the brightest and the darkest of its own eight neighbours; the brightness each image has here already occurs among the other image's eight neighbours; and there is a real edge nearby for it to be a blend of. Requiring a blend is what stops a genuine move being swallowed, because a hard-edged shape shifted a whole pixel puts a plateau value on both sides and no blend at all. The honest limits: an already-antialiased shape that moves by one pixel is blend against blend and will be discounted, and so will the soft edge of a shape that was recoloured, though its solid middle will not. Turn it off before you conclude that nothing moved.
Four ways to look
What is different
Waiting for two images.
Channel by channel
A difference only in blue means something different from a difference in all three. The last two columns say which way each channel moved, from the first image to the second.
What this is, and what it is not
Two measures, because there are two questions. How many pixels differ is a question about bytes, answered by the largest absolute move across the three channels. How many differ enough to see is a question about eyes, answered in CIE L*a*b* with the 1976 dE formula, where about 2.3 is the classical just-noticeable difference between two large flat patches. A re-encoded JPEG can have half a million differing bytes and nothing a person could point at, and only the second number tells you that.
The map is amplified on purpose. Every differing pixel is drawn at the full strength of its band, so a move of 2 out of 255 is as visible as a move of 200. If they were drawn at their true strength you would see nothing, which is the failure mode of every difference view that just subtracts one image from the other. The legend says which band is which, and the unchanged part of the frame is the first image knocked back to a dim grey so you can see where you are.
Different sizes are said, not guessed at. If the two images are not the same shape, only the overlapping top left corner is compared and the summary says so. Scaling the second to the first is offered as a separate, explicit choice, because resampling changes pixels on its own and every number afterwards includes that change as well as yours.
The bounding box can mislead, so the fill is given too. Two specks in opposite corners produce a bounding box the size of the picture. That is why the summary states what fraction of the box actually differs, and calls the difference spread across the frame rather than pretending the box means anything when it does not.
It compares pictures, not files. Both images are decoded to pixels first, so this will not tell you that the metadata changed, that one is progressive and one is baseline, or that a PNG gained a colour profile. A pair that comes out identical here can still be two different files. CHECKSUM and EXIF answer those questions.
Questions people ask
Why do two visually identical JPEGs show thousands of differing pixels?
Because JPEG is lossy and re-saving it re-quantises every 8 by 8 block. Almost all of those differences will be under the noticeable count, and the difference map will show a faint blue wash in the busy parts of the picture and nothing in the flat parts. That pattern is the signature of a re-encode rather than an edit.
What does a difference only in the blue channel mean?
Usually a colour profile, a white balance or a tint, not new content. Blue is also where most compressors throw information away first, because the eye has the fewest short-wave cones. A genuine edit almost always moves all three channels together, which is why the breakdown is on the page.
Should I turn on ignore antialiasing?
Turn it on when comparing two renders of the same page, where the text edges will differ on every letter and drown out anything real. Leave it off when you want to know whether the file changed at all. The test asks for a blend, so a hard-edged shape that shifted a whole pixel is still counted; an already-soft shape that shifted, and the soft edge of anything recoloured, are not, which is the reason to look with it off as well as on.
What is dE 2.3?
The classical just-noticeable difference in the CIE 1976 colour difference formula: the distance in L*a*b* at which a person looking at two large flat patches side by side begins to tell them apart. It is a rough figure taken under laboratory conditions, and real differences inside texture or small text need to be larger before anyone sees them. Treat it as a floor.
Can I compare a screenshot against a design mock-up?
Yes, and the wipe and onion views are usually more useful than the map for that, because the two will differ almost everywhere. Scale them to a common size first, and expect the resampling itself to appear in the numbers.
Are my images uploaded?
No. Both are decoded by the browser, drawn onto canvases in this tab and compared here. Nothing is sent anywhere, and the page works with the network switched off.