Image Diff
Compare two images side-by-side, overlay, or pixel diff.
Image Diff compares two images in one of three ways — "Compare two images side-by-side, overlay, or pixel diff," as the card says. Drop image A ("Select the first image:") and image B ("Select the second image:"), pick a Mode, and hit "Compare Images". Pixel Diff mode also reports "Different Pixels" and "Difference" (%) so visual QA becomes a number.
Side by Side draws both images next to each other for eyeballing; Overlay ghosts the second over the first at "Overlay Opacity %" (default 50) to spot alignment drift; Pixel Diff paints differing pixels red (255,0,0,255) against a dimmed match layer. "Diff Threshold" (0–255, default 0) controls sensitivity. Everything runs on canvas locally.
How it works
lib compareImages branches by mode: side-by-side draws A then B across a canvas with summed widths; overlay draws A then B with globalAlpha = overlayOpacity/100; diff computes per-pixel |ΔR|, |ΔG|, |ΔB| against the threshold — any channel delta above it marks the pixel red, matching pixels keep the original at alpha 128.
diffPercentage = diffPixels / total × 100 (two decimals) and drives the Different Pixels / Difference stats when greater than 0. The canvas is sized with max(w) of the two inputs (height leans on image A in a couple of places). Output is a PNG data URL for all modes; toasts: "Comparison complete!" / "Error comparing images".
How to use
- Drop image A at "Select the first image:".
- Drop image B at "Select the second image:" — or "Cancel" to abort the second pick.
- Choose Mode: Side by Side, Overlay, or Pixel Diff.
- Set "Overlay Opacity %" (0–100, default 50) for overlay mode and/or "Diff Threshold" (0–255, default 0) for diff mode.
- Click "Compare Images" (label becomes "Comparing...").
- In Pixel Diff mode, read "Different Pixels" and "Difference (%)" under the result.
- Click "Compare Again" to rerun, change the mode, or adjust the threshold.
Tips
- Diff Threshold 0 flags any channel delta above zero — raise it to ignore compression noise and near-identical re-encodes.
- Side by Side is best for visual QA; Pixel Diff quantifies the change when you need a percentage.
- Overlay at 50% opacity is the classic ghosting check for alignment differences between revisions.
- Output for all three modes is a PNG data URL image you can save or share.
- "Could not read image" means one input failed to decode — verify both files open before comparing.
Image Diff FAQ
What does Diff Threshold mean?
A pixel counts as different when any RGB channel delta exceeds the threshold (0–255).
Do both images need the same size?
Not necessarily — the diff path uses the max dimensions of the two; side-by-side sums widths.
Is Difference % shown for all modes?
The stats render when diffPercentage > 0, which comes from pixel diff mode.
Is anything uploaded?
No — canvas ImageData pixel comparison runs entirely in the browser.
What is the output format?
A PNG data URL image for the comparison result, in any mode.
Credits
- Canvas ImageData — Per-pixel diff, overlay, and side-by-side rendering