Image Diff Tool
Drop in two images of the same dimensions to highlight pixel-level differences. Useful for QA, regression checks, and design reviews.
What Image Diff is good for
The core question this tool answers is precise: did these two images change, and where? That comes up constantly in real work. A QA tester re-runs a build and needs to confirm a UI screenshot is pixel-identical to the approved baseline. A developer exports an icon at a new size and wants to verify the visible artwork is unchanged. A photographer re-saves a JPEG at a lower quality and wants to see exactly which regions picked up compression artifacts.
Because the diff is highlighted spatially, you do not just learn that something changed, you learn where. Edits to a single button, a re-rendered chart region, or a watermark added in one corner show up as red pixels in that area while the rest of the frame stays dark. The readout reports the measured changed-pixel count, total sampled pixels, and percentage for the files you actually supplied, which can support a bug report or review note.
It is also handy for catching changes that are difficult to see. Two exports that look identical at a glance can differ because a tool re-encoded their pixels. At threshold 0, the comparison flags every changed decoded red, green, blue, or alpha channel. That is a strict canvas-pixel check when the dimensions match, not a comparison of the original file bytes or metadata.
How to use it
Load your reference image into the Image A slot and the image you want to check into Image B. Set the threshold (it defaults to 20 on a 0–255 per-channel scale), then click Compare. The Diff panel fills in with red where pixels differ, and the info line reports the exact count and percentage. If you want to keep the result, click Download diff PNG to save it as diff.png. Use Reset to clear both images and start a new comparison.
A practical example: checking a compressed export
Say you have logo-original.png and you ran it through a compressor to get logo-small.png. You want to know whether the compression touched the visible artwork or only stripped invisible data.
Load the source logo as Image A and its compressed copy as Image B. Leave the threshold at 20 and click Compare. If the result reports no changed pixels, none of the decoded red, green, blue, or alpha channels differs by more than that tolerance; it does not prove the source files or metadata are identical.
Now lower the threshold to 0 and compare again. Small red regions may appear along gradients and edges where the compressor changed decoded channel values. The measured count depends entirely on your two files, so use the displayed result rather than an assumed benchmark. Download the diff PNG if you need to document where those changes occurred.
Supported input and output
Input is two images in any format your browser can decode — that typically covers PNG, JPEG, WebP, GIF (first frame), BMP, and usually AVIF, depending on the browser. Both file pickers accept any image type.
The output is threefold: a red-highlight diff canvas (differing pixels in red, everything else on a dark background), a changed-pixel count plus percentage shown in the info line, and a downloadable diff.png saved from that canvas. The comparison is always performed at image A's dimensions; if B is a different size, B is scaled to match A before the pixels are compared, and the tool tells you it did so.
Quality and limitations
The comparison is a straight per-channel RGBA difference, not a perceptual one. A pixel is flagged when its decoded red, green, blue, or alpha value differs by more than the threshold. The tool therefore treats a barely visible channel shift the same as an obvious one at the same threshold; it measures canvas values rather than perceived color difference.
When image B has different dimensions, it is rescaled to A's size using the browser's default canvas scaling. That resampling shifts pixels around, so a resized-then-compared image will usually show widespread differences even if the artwork is "the same" — the diff is only strict when both images share identical dimensions.
The diff also collapses to a binary view: a pixel is either over threshold (red) or not (dark). It does not shade by how large the difference is, so a tiny change and a huge change look the same in the highlight. Lean on the percentage number for magnitude. To avoid allocating several very large canvases and pixel buffers in one browser tab, each input is limited to 4 megapixels and 4096px on its longest side. Resize comparison copies first when a source exceeds either limit.
Common problems and fixes
The whole frame lights up red even though the images look the same. This almost always means A and B have different dimensions, so B was scaled and every pixel shifted. The info line will note that B was scaled to A. Fix it by exporting both images at identical pixel dimensions before comparing.
The Compare button stays disabled. It only enables once both Image A and Image B are loaded. If one preview is blank, re-pick that file; a load error will be shown in the info line if the file could not be decoded.
You expected differences but get 0%. Your threshold may be too high — at the default of 20, any change of 20 or less per channel is ignored. Drop the threshold toward 0 to catch subtle re-encoding, then raise it to filter out noise.
Too much red noise. Raise the threshold. JPEGs in particular carry low-level compression noise everywhere, so a threshold of 0 will flag huge areas; values like 15–30 separate real edits from encoding jitter.
The download produced a dark image with little red. That is expected — the diff PNG is the dark-background result canvas, so it only shows red where pixels actually differed. If almost nothing differs, the PNG is almost entirely dark.
Frequently asked questions
What does the threshold value actually control?
It is the maximum per-channel difference, on a 0–255 scale, that the tool treats as the same. At the default of 20, a pixel is flagged when its decoded red, green, blue, or alpha value differs by more than 20. Set it to 0 to flag any decoded-channel change, or raise it to ignore minor compression noise. This does not compare file bytes or metadata.
What happens if my two images are different sizes?
The comparison is always done at image A's dimensions. If image B is a different size, B is scaled to match A before the pixels are compared, and the info line tells you it was scaled. Because rescaling shifts pixels, a resized comparison usually shows many differences even when the artwork is otherwise identical, so for strict checks you should make both images the same size first.
Why is the diff highlighted in red on a dark background?
Differing pixels are painted red (RGB 255,60,60) and matching pixels are painted dark grey, so changes stand out clearly. The dark background is also why a downloaded diff PNG looks mostly dark with red spots — it only shows where the two images actually differed.
Related tools and guides
Compress an image and check the result · Convert between image formats · Resize images to matching dimensions · Convert WebP to JPG · View image EXIF metadata · Image compression explained · JPG vs PNG: which to use · WebP vs JPG vs PNG comparison