Image Diff — Compare Two Images Pixel-by-Pixel (Local)
Highlight differences between two images pixel-by-pixel using pixelmatch. Get a diff PNG and a count of changed pixels. Runs entirely in your browser.
Last updated:
Image A
Drop image A here
Image B
Drop image B here
Compare two images pixel-by-pixel using pixelmatch. Get a diff PNG showing every changed pixel in red, plus a count and percentage. Runs entirely in your browser.
What is Image Diff?
Image diff is the visual counterpart to text diff. Whether you're doing visual regression testing, verifying a screenshot matches a design, or checking whether two 'identical' downloads are actually the same, byte-comparison isn't good enough — a PNG can be re-encoded without changing a single pixel. This tool uses pixelmatch (the library that powers most visual regression testing tools) to do a perception-aware pixel comparison in your browser.
How to diff two images online
- 1Drop images into slots A and B. They must have the same dimensions — resize first if needed.
- 2Adjust the threshold to control sensitivity to small differences (0.1 default is a good middle ground).
- 3Click 'Diff images' to run the comparison and download the diff PNG.
Use Cases
Visual regression testing
Compare a before/after screenshot to catch unintended UI changes.
Design vs implementation
Overlay a Figma export on top of a live screenshot to spot pixel drift.
Verify identical outputs
Confirm that two image-processing pipelines produce pixel-identical results.
Tips & Best Practices
- ▸Antialiasing detection is off by default; enable stricter mode by dropping the threshold to 0.
- ▸Different sizes = refusal to diff. Use Image Resizer to normalize dimensions first.
- ▸The diff PNG shows original images faded with red overlay on changed pixels — great for eyeballing where the differences are.
Frequently Asked Questions
What if the two images have different sizes?
The tool refuses to compare — pixel-level diff needs identical dimensions. Resize both to the same size first (use our Image Resizer with locked aspect ratio).
What does the threshold do?
Threshold controls how much color difference at each pixel counts as 'different'. 0 = strict (every subpixel difference), 0.1 (default) matches perceptual differences without noise, higher = only flag major differences. Good for anti-aliasing tolerance.
Where can I use this?
Visual regression testing (compare before/after screenshots), QA (design vs implementation), or investigating whether two images are truly identical (byte-different files can still be pixel-identical).
Related Tools
EXIF Viewer
View EXIF metadata in JPEG, HEIC, TIFF, and PNG photos: camera model, GPS coordinates, exact timestamps, and more. Runs entirely in your browser — nothing is uploaded.
EXIF Remover
Remove EXIF, GPS, and other metadata from your photos before sharing. Two modes: precise (lossless JPEG) or full re-encode (any format). 100% local — the photo never leaves your device.
PNG → JPG
Convert PNG images to JPG in your browser. Adjustable quality, custom background color for transparent PNGs, batch download. 100% local — nothing is uploaded.
JPG → PNG
Convert JPG images to PNG in your browser. Lossless output — no re-compression artifacts. Batch download supported. 100% local.
WebP → JPG
Convert WebP images to JPG in your browser. Great for legacy tools and platforms that don't accept WebP. 100% local, batch supported, adjustable quality.
WebP → PNG
Convert WebP images to PNG in your browser without losing more quality than the WebP already had. Preserves transparency. 100% local.