Image Diff Tool

Drop in two images of the same dimensions to highlight pixel-level differences. Useful for QA, regression checks, and design reviews.

Image A Image B

Diff

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 all show up as a cluster of red pixels in that exact spot, while the rest of the frame stays dark. The numeric readout (for example "12,480 / 307,200 pixels differ (4.06%)") gives you a hard figure you can paste into a bug report or a pull request comment.

It is also handy for catching invisible-to-the-eye changes. Two exports that look identical at a glance can differ by a fraction of a percent because a tool re-encoded the pixels. Lowering the threshold to 0 surfaces every single changed channel value, which is the strict test for "is this byte-for-byte the same picture?"

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 logo-original.png as Image A and logo-small.png as Image B. Leave the threshold at the default 20 and click Compare. The info line reports, for instance, "0 / 65,536 pixels differ (0.00%) at threshold 20" — meaning no channel moved by more than 20 anywhere, so the picture is visually intact at that tolerance.

Now lower the threshold to 0 and compare again. This time it might read "3,210 / 65,536 pixels differ (4.90%)", and the Diff panel shows faint red along gradients and edges. That tells you the compressor did re-encode pixels with tiny sub-threshold changes, concentrated where color transitions are smoothest — the classic signature of lossy compression. Download the diff PNG and attach it to your notes so the change is documented.

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.

Privacy

This comparison runs in your browser where supported. Both images are read locally and drawn onto in-memory canvases on your own device; no file is uploaded to a server, and there is no account, login, or sign-up.

Because the pixel walk, the diff render, and the PNG export all happen client-side, your images are not uploaded to a server. That makes the tool safe for screenshots of unreleased products, internal dashboards, private photos, or any artwork you cannot send to a third party.

Quality and limitations

The comparison is a straight per-channel RGB difference, not a perceptual one. A pixel is flagged when red, green, or blue differs by more than the threshold, so the tool treats a change the human eye barely notices the same as one it does — it measures raw values, not perceived color difference. The alpha channel is not part of the threshold test, so two images that differ only in transparency may not show up as different in the red highlight.

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. Very large images mean a larger pixel loop and more memory, so extremely high-resolution pairs can take a moment to process.

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.

Best practices and tips

Match dimensions first. The diff is only strict and trustworthy when A and B are the same size, so avoid relying on the auto-scaling for precise QA — resize deliberately beforehand if you must compare different sizes.

Sweep the threshold rather than trusting one value. Run a strict pass at 0 to see if anything changed at all, then raise it to roughly 15–30 to see which changes are visually meaningful. The two numbers together tell a fuller story than either alone.

Put your reference in slot A. Since the comparison happens at A's dimensions, load the canonical or approved image there and the candidate in B.

Record the numbers. The count and percentage in the info line are reproducible evidence; copy them into bug reports or commit messages alongside the downloaded diff.png so reviewers can see exactly what moved.

For lossy formats, compare in the original format when possible — re-saving a WebP or AVIF as PNG before diffing can itself introduce changes that muddy the result.

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 will treat as "the same." At the default of 20, a pixel is flagged red only if its red, green, or blue value differs by more than 20 between the two images. Set it to 0 for a strict, byte-exact check, or raise it to ignore minor compression noise.

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.

Does the tool compare transparency or only color?

The threshold test compares the red, green, and blue channels only. The alpha (transparency) channel is not part of that test, so two images that differ only in opacity may not be flagged as different in the red highlight.

How do I read the percentage it reports?

The info line shows the number of changed pixels, the total pixel count, and the percentage — for example "12,480 / 307,200 pixels differ (4.06%) at threshold 20." The percentage is changed pixels divided by total pixels, so 0.00% means nothing exceeded your threshold and the images are identical at that tolerance.

Can I save or share the comparison result?

Yes. After comparing, click Download diff PNG to save the highlighted result canvas as diff.png. It captures exactly what is shown in the Diff panel at A's resolution, which makes it easy to attach to a bug report or pull request.

Are my images uploaded anywhere?

No. Both images are read and compared in your browser where supported on your own device — there is no server upload, no account, and no sign-up. This makes it safe for private screenshots, unreleased designs, and confidential artwork.

Which image formats can I load?

Any format your browser can decode, which typically includes PNG, JPEG, WebP, GIF, BMP, and usually AVIF. You can also mix formats — for example compare a PNG against a WebP — since both are decoded to pixels before the comparison.

Last updated: June 2026