Image Diff

Compares two images side by side and highlights the differences between them. Useful for spotting changes in screenshots, design mockups, or any visual content.

Comparison modes

Side by side: shows both images next to each other for manual comparison
Overlay diff: pixels that differ are highlighted in a high-contrast color (often red or pink)
Slider: drag a divider between the two images to reveal differences progressively
Onion skin: blends both images semi-transparently for subtle difference detection

Use cases

Comparing a design mockup against the implemented screenshot to find pixel-level discrepancies
Verifying that a UI change only affected the intended area
Detecting unintended visual regressions after a CSS or layout change
Spot-checking document scans or PDFs for changes between versions
Forensic image analysis, checking if a photo has been altered

Tips for best results

Images should be the same dimensions for accurate pixel-level comparison
Use PNG for screenshots to avoid JPEG compression artifacts that create false differences
Zoom in on the diff overlay to investigate small changes

All processing is done locally in your browser, no images are uploaded to any server.