Image Difference Checker

Image Difference Checker compares two pictures pixel by pixel and paints the result back onto the image as a colour heatmap, so the places where the two files differ light up in the same coordinates as the original. A bright, warm region means a large difference; a cool or faint region means a small one; and untouched areas carry no overlay at all.

The tool also reports how many pixels changed and an approximate percentage of the image that was altered, giving you both a map and a scale for the change. It accepts two JPG, PNG or WebP files, up to about 25 MB each, and performs the entire comparison locally in your browser with no upload.

The standard use is visual verification. A designer diffing two versions of a mock-up. A developer detecting that a CSS change moved a layout region. A content editor checking whether a watermark or a logo edit touched more of an image than it should. The heatmap answers the question the slider cannot: where, exactly, do these two pictures stop being identical?

Technically, both images are drawn onto canvases at a matching resolution and every pixel pair is compared by Euclidean distance in RGB space. That distance is mapped to a heat scale, from cool blues for tiny deviations to yellows and reds for large ones, and composited over the first image so the result keeps its context.

Because the comparison is pixel-exact and threshold-sensitive, it is strict. Lossy compression, colour profile shifts and even a subtle brightness adjustment change almost every pixel by a small amount, so two images that look identical to a person can still produce a visible heatmap. That is a feature for QC work and a caveat to remember when your "identical" pair comes back noisy.

All processing happens in memory on your device. The files are decoded, diffed and rendered, then discarded when you close or reload the tab; your originals are never modified, and nothing is transmitted during the review.

Because the result is a lightweight overlay rather than a new image file, you can save or screenshot the composite and attach it to a ticket, a review comment or a change request. For teams working across time zones, that single annotated frame communicates exactly which areas changed and how strongly, removing the need for a lengthy written description of every pixel-level alteration.

The comparison works on raw pixel data. The two files are drawn onto separate off-screen canvases, and the tool walks both buffers in lockstep, computing the Euclidean distance between the red, green and blue values of each corresponding pixel pair. A distance of zero means the pixels match exactly; a distance near the theoretical maximum means they are opposites.

That distance is then painted as a colour. Large distances map through the warm end of the scale and small ones through the cool end, and identical pixels are left transparent so the underlying image shows through. The result is a single composite view where the original picture acts as the map and the overlay acts as the legend.

• Distance is measured in RGB space, matching dark-versus-bright and hue shifts alike.
• Identical pixels stay uncoloured, so clean areas do not compete with changed ones.
• The overlay is composited over the first image for spatial context.
• Large differences are always detectable even when they occupy few pixels.

The heat colour encodes magnitude, and reading it correctly turns the overlay into actionable intel. A thin red band across a navigation bar is a strong, localised change; a wide blue haze across the whole frame is a small global shift, like a tiny brightness adjustment that touched everything.

Keep the scale in context: a large red region at the bottom of the frame might just be one element that moved, while a diffuse cool wash over the entire image suggests a global filter rather than a structural edit.

Pixel-exact diffing is the backbone of visual regression checking: verifying that a change to code, a template or a design file did not accidentally alter regions it should have. A heatmap makes unintended changes visible in seconds, and its spatial output can be dropped straight into an issue tracker to show exactly where a regression lives.

It is equally useful for content integrity work. Checking that a watermarked download only differs in the watermark area, or that a claimed retouch actually stayed local, are both questions the heatmap answers at a glance. The visual output is usually more persuasive than a percentage for these conversations.

• Visual regression checks after CSS, layout or template changes.
• Confirming that a watermark or logo edit touched only its own region.
• Spotting region-specific damage from aggressive compression.
• Verifying that a retouch changed the expected area and nothing else.

The tool counts any pixel whose RGB distance exceeds zero as changed, which makes it far more sensitive than human vision. A JPEG re-encoded at quality 90 can show a diffuse heatmap over nearly the whole frame even though both versions look identical on screen, because lossy compression perturbs almost every pixel by one or two units.

That trap has a simple escape: read the magnitude, not just the presence. Diffuse cool washes from re-encoding are usually cosmetic, while concentrated warm regions indicate genuine edits. If you need a verdict free of this sensitivity, the Pixel Difference Checker gives you exact percentages, and for a human-scale score the Similarity Checker is the practical choice.

The kit's comparison tools sit at four different points between "see" and "measure". Image Compare is entirely visual, Image Difference Checker is spatial and semi-quantitative, Pixel Difference Checker is purely numeric, and Image Similarity Checker collapses everything into one percentage. Knowing which one each question needs saves a lot of re-running.

A quick rule: use the heatmap when you need to know where, use the pixel tool when you need to know exactly how much, and use the similarity score when you only need to decide "close enough?".

A repeatable workflow beats an ad-hoc diff every time. Generate a baseline export of the reference state, keep it alongside the working copy, and diff whenever you make a change. Store the heatmap output with the change request so reviewers can verify scope at a glance without re-running anything.

Use consistent sources and settings for both sides, and record the pixel-change count alongside the heatmap. Over time, the drift in those counts becomes a health metric for your pipeline: sudden jumps in changed pixels correlate with unintended, wide-scope edits.

• Keep a fixed baseline export for regression reference.
• Diff after each change and archive the heatmap with the change request.
• Record the approximate percentage so scope changes are trackable over time.
• Re-review visually but decide on the numbers, especially for production pipelines.