PNG Diff — Visually Compare Two PNGs
Drop exactly two PNGs (or JPGs / WebPs) — A first, then B. Drag the A ⟷ B slider to eyeball what moved, then click Diff to produce a third image: matching pixels go desaturated grey, changed pixels are painted in your highlight colour, with a "% different" stat. Useful for visual-regression testing, design-review comparisons, and "did anything change?" checks on screenshots.
Drop two images here (A and B)
First-dropped is A; second is B
Picking the threshold
Threshold is the per-channel difference (0–255) below which two pixels are treated as identical:
- 0 — strict. Even a 1-bit difference counts. JPG-vs-JPG will look fully highlighted.
- 5 — very strict. Catches anything that isn't bit-perfect.
- 12 (default) — sensible balance. Ignores tiny anti-aliasing wobble.
- 20–30 — loose. Use for comparing JPG-encoded versions where re-encoding noise is everywhere.
- 50+ — only major changes flagged.
Common workflows
- Visual regression on a UI. Capture before / after screenshots of a page; diff. Threshold 12 for typical UI; 5 if you need pixel-perfect.
- Design review. Two mock-up versions — diff highlights exactly what moved.
- Compression QA. Diff an original PNG against its JPG-encoded version (threshold 20+) to find where artefacts appear.
- Screenshot before / after a fix. Confirm the fix didn't break anything else visually.
FAQ
How do I find the difference between two screenshots?
Drop the "before" image first, then the "after" — the tool greys out matching pixels and paints every change in your highlight colour, with a "% different" figure. Ideal for visual-regression checks and confirming a fix didn't move anything unexpectedly.
Is there a slider / side-by-side view?
Yes — once both images are dropped, a swipe slider appears so you can drag across and compare A against B directly. The downloadable diff (with the "% different" stat) is best for catching small or scattered changes; the slider is best for spotting what moved at a glance.
What if A and B are different sizes?
The diff canvas is sized to the larger of the two. Differences within the overlap region are highlighted; the non-overlapping margin is left blank. For meaningful diffs, resize both to the same dimensions first via Resize.
Why does my JPG-vs-JPG diff have noise everywhere?
JPG re-encoding introduces small per-pixel changes across the whole image. Bump the threshold to 20–30 to ignore re-encoding noise; or compare PNG-vs-PNG instead.
"% different" — what does it count?
The percentage of pixels where at least one channel differs by more than the threshold. A 1% diff is small but visible; 10%+ is a major visual change.
Anti-aliased fonts move slightly between renders — how do I ignore that?
Bump the threshold to 15–20. Sub-pixel rendering varies by GPU / OS, so even "identical" UIs aren't bit-identical.
Part of: Clean up a folder of near-identical images
Perceptual hashing catches resaves and resizes that a byte comparison calls unique.
- 1 Find duplicates Group the folder by visual similarity
- 2 Perceptual hash The perceptual hash of one file, to compare by hand
- 3 Image diff Exactly which pixels differ between two
- 4 Contact sheet One sheet of everything, to eyeball it
Part of: Check an image works for everyone
Roughly one man in twelve has some red-green colour deficiency. If the image carries meaning in colour alone, it is lost on them.
- 1 WCAG contrast WCAG AA and AAA ratios for text over the image
- 2 Colour blindness The same image through eight kinds of colour vision
- 3 Grayscale If it fails in grey, colour is doing the work alone
- 4 Image diff Compare the simulated versions side by side