Image Diff Viewer

Free online image diff tool. Compare two images side-by-side, with a drag slider, onion-skin overlay, or pixel-level highlight. Runs fully in your browser, no upload.

Compare two images four ways: side-by-side, drag slider, onion-skin, or pixel highlight. Drop two images and instantly spot what changed. Perfect for UI regressions, design revisions, and screenshot reviews. 🔒 Runs entirely in your browser. Images are never uploaded to any server.

Drag an image here, or click to choose
Drag an image here, or click to choose
Load an image on both sides to start comparing.

How image diffing works

Four ways to compare

  • Side by side — the simplest check: both images shown at full size next to each other.
  • Slider — a draggable divider reveals the old image on one side and the new on the other, ideal for before/after UI changes.
  • Onion skin — overlays the second image on the first with adjustable opacity, great for spotting shifts and alignment drift.
  • Pixel diff — compares every pixel and paints the changed ones red, so even a one-pixel change is impossible to miss.

The pixel-diff metric

Instead of a naive RGB subtraction, the pixel-diff mode uses a YIQ color-distance metric — the same approach as the popular pixelmatch library. YIQ separates brightness (Y) from chrominance (I, Q), which matches how the human eye perceives difference. A single threshold slider controls how big a difference must be before a pixel is flagged.

Common scenarios

  1. UI regression testing — compare a screenshot before and after a code change.
  2. Design review — verify a developer's build matches the mockup.
  3. Image compression QA — see exactly which regions an encoder altered.
  4. Photo edits — confirm which pixels a retouch touched.

Everything runs on the Canvas API in your browser — no uploads, no waiting.

FAQs

Are my images uploaded to a server?
No. Every comparison happens locally in your browser using the Canvas API. Your images never leave your device.
What if the two images have different dimensions?
The tool still compares them by aligning to the top-left corner and using the larger canvas. A notice shows both sizes. For pixel-accurate results, use images of the same size.
Which formats are supported?
Anything the browser can decode: PNG, JPG, WebP, GIF (first frame), BMP, and SVG.
What does the threshold slider do?
It sets how different two pixels must be before they count as a change, using a YIQ color-distance metric. Lower = stricter, higher = more tolerant of minor color shifts.
How do I save the pixel-diff result?
Switch to Pixel Diff mode and click 'Download diff' to export the highlighted result as a PNG.