Image Diff Compare
Image Diff Compare puts two images side by side at the pixel level and shows you
Image Diff Compare puts two images side by side at the pixel level and shows you
How to use Image Diff Compare
- Choose your original image as Image A and the changed version as Image B.
- Set the tolerance slider (0% for exact, higher to ignore compression noise) and pick a diff-map or transparent-overlay output.
- Click Compare images to see the percent changed, the highlighted diff, and download the diff PNG.
About Image Diff Compare
Image Diff Compare puts two images side by side at the pixel level and shows you exactly what changed between them. Load an "original" and a "changed" version, and the tool walks every pixel, flags the ones that differ, and paints them magenta over a dimmed grey copy of the original so the edits jump out. You also get a hard number: the percentage of pixels that changed and the raw count.
Comparison happens on Image A's dimensions. If the two images are different sizes, Image B is scaled to match A before comparing — this is convenient, but any resizing can introduce small differences of its own, so the tool warns you when sizes don't match. The tolerance slider lets you ignore tiny color shifts (for example, JPEG compression noise) so you only see meaningful edits; set it to 0% to flag literally any difference. There is also a transparent-overlay output mode that keeps only the changed pixels, which is useful for layering over the original in another editor.
Everything runs locally with the HTML Canvas API. Your images never leave your device — nothing is uploaded, and there is no account or sign-up. It works best on screenshots, exported designs, and other same-source images; heavily compressed photos of the same scene shot separately will show large differences because of noise and alignment.
Frequently asked questions
- How does it decide a pixel changed?
- For each pixel it compares the red, green, blue and alpha channels of both images and takes the largest single-channel difference (0–255). If that difference exceeds your tolerance cutoff, the pixel is marked as changed and highlighted in magenta.
- What if my two images are different sizes?
- Image B is automatically scaled to match Image A's width and height, then compared. This lets you diff a resized export against an original, but scaling can create small artificial differences, so the tool shows a note whenever the original sizes don't match.
- Why does the tolerance slider matter?
- Formats like JPEG and WebP re-encode colors slightly, so two visually identical images can differ by a few levels per channel. Raising the tolerance ignores that noise so you only see real edits. Set it to 0% for an exact, pixel-perfect comparison.
- Are my images uploaded anywhere?
- No. All comparison happens in your browser using the Canvas API. The images are read locally, never sent to a server, and nothing is stored after you close the tab.
- What formats can I compare?
- Any image your browser can open — PNG, JPG/JPEG, WebP, GIF (first frame), BMP and usually AVIF. You can even compare two different formats; both are decoded to raw pixels before the diff.
- What is the magenta versus grey output?
- In the default diff map, unchanged areas are shown as a dimmed grey version of Image A for context, and every changed pixel is painted bright magenta so edits are easy to spot. Switch to overlay mode to get only the magenta changes on a transparent background.