Visual Image Comparison Tool
Compare two images side-by-side, with a split slider, opacity overlay, or highlighted difference heatmap entirely in your browser.
Visual Image Comparison Guide
Compare two images side-by-side, with an interactive split slider, opacity overlay, or highlighted difference heatmap.
Overview
The Visual Image Comparison tool enables developers, designers, and QA engineers to inspect visual differences and regressions between two image files. It provides split-screen slider comparisons, side-by-side layouts, adjustable opacity overlays, and pixel difference heatmap calculations completely within the browser.
How to Compare Two Images
Select or drop Image A (Before/Reference) and Image B (After/Target) in PNG, JPEG, or WebP format.
Switch between Split Slider, Side-by-Side, Overlay, and Difference Heatmap depending on your inspection needs.
Review the dimension delta bar and, in Diff Heatmap mode, adjust tolerance to reveal subtle pixel discrepancies.
Save the generated difference image directly to your local machine for bug reports and pull request reviews.
- Supported Formats: PNG, JPEG, and WebP raster images.
- File Size Limit: Up to 20 MiB per image decoded locally in browser memory.
- Dimension Support: Compares images of any resolution; dimensions delta is flagged if dimensions mismatch.
- Local Canvas Processing: Pixel diffing and rendering happen purely inside your browser.
- Zero Cloud Transmission: Your screenshots, design mockups, and confidential artwork are never sent to external servers.