Image Compare Online — Diff, Before/After Slider & Find Differences Free
Drop two images and instantly compare them in four ways: side by side, a reveal slider, a pixel-level diff map, or an opacity overlay. Every comparison mode runs directly in your browser — your images never leave your device.
Whether you're a developer catching visual regressions, a designer reviewing iterations, or a photographer comparing edits, this tool gives you the precision you need without a single file upload.
How to Use the Image Comparison Tool
- Upload two images — drag and drop or click the upload zones to load Image A (original/before) and Image B (modified/after). Supports JPG, PNG, WebP, GIF, SVG, AVIF, and any format your browser renders.
- Choose a comparison mode — select Slider, Side by Side, Diff, or Overlay from the mode tabs.
- Inspect and analyze — in Diff mode, adjust the sensitivity threshold and highlight color; in Overlay mode, drag the opacity slider. Download the diff map as PNG when needed.
Four Comparison Modes Explained
Before/After Slider places both images on the same canvas with a draggable divider. Drag left to reveal more of the "after" image; drag right to reveal more of the "before." The classic reveal format for showcasing photo retouching, design redesigns, and transformations.
Side by Side renders each image on its own canvas at the same display height. Best for a quick overall impression when the images have very different content or you want to compare metadata (dimensions, file size) side by side.
Diff Highlight runs a pixel-by-pixel comparison using the perceptual YIQ color-distance algorithm. Pixels that differ above the threshold are highlighted in a contrasting color (default: magenta). Identical pixels are shown at reduced opacity. The analysis panel reports similarity percentage, number of different pixels, and total pixel count.
Overlay / Fade stacks both images on top of each other. Dragging the opacity slider from 0% to 100% transitions from showing only Image B to showing only Image A, blending both in between. Best for detecting positional shifts, layer misalignments, and structural differences.
What Is a Pixel Diff?
A pixel diff compares two images pixel by pixel, checking whether each corresponding pair of pixels is identical or different. The comparison uses a perceptual color distance formula (YIQ NTSC) that matches how human vision perceives color differences rather than raw channel arithmetic.
Pixels that differ above the threshold are marked with the highlight color. The threshold setting lets you control sensitivity: a low threshold (close to 0) flags even JPEG compression artifacts; the default threshold of 0.10 ignores subtle compression noise but catches real design changes. A similarity score of 98% on a 1000×1000 image still means 20,000 different pixels — often more than it sounds.
Common Use Cases
- Visual regression testing: Compare before/after screenshots of a UI after a code change. Even minor shifts in padding, font weight, or color get caught at the pixel level.
- Photo retouching review: Use the slider to reveal how a photo changed between your raw edit and the final export — or compare two processing presets.
- Design iteration review: Drop two Figma exports, screenshots, or mockup renders and instantly see which elements changed.
- Image authenticity: Detect cloning, airbrushing, or pixel-level manipulation by comparing the suspected image against a reference.
- Compression quality check: Compare the original PNG against a lossy JPEG or WebP export to see exactly which areas were degraded by compression.
Frequently Asked Questions
Are my images uploaded to a server when I compare them?
No. Both images are loaded directly in your browser using the File API. All comparison modes — including the pixel diff analysis — run entirely client-side using the Canvas API. Your images are never transmitted to any server and are not accessible to anyone else.
What is the threshold setting in the diff mode?
The threshold controls how sensitive the pixel comparison is. A value of 0 marks any difference whatsoever — including JPEG compression artifacts. The default of 0.10 ignores subtle noise from compression or antialiasing while still catching real changes. Raise the threshold if you want to focus only on larger, more obvious differences; lower it if you need to detect every small pixel change.
What does the similarity percentage mean?
It represents the proportion of pixels that are considered matching within the specified threshold. A 100% similarity score means the images are pixel-perfect identical. 95% means 5% of the pixels differ — for a 2000×1500 image, that is 150,000 different pixels, which is significant even if most of the image looks the same at a glance.
What if my two images have different dimensions?
The Diff and Overlay modes work best with images of the same dimensions. If the images differ in size, the tool scales the smaller image to match the larger one before running the pixel comparison. The Side by Side mode is the most informative choice for images with significantly different sizes.
Can I download the diff result as an image?
Yes. In Diff mode, after the analysis runs, a "Download diff PNG" button appears. It exports the diff map — the highlighted difference overlay — as a PNG file you can share or use in a report.
What is visual regression testing?
Visual regression testing is the practice of comparing UI screenshots taken before and after a code change to catch unintended visual differences. This tool lets you manually perform that comparison: load the "before" screenshot as Image A, the "after" screenshot as Image B, and switch to Diff mode to see exactly which pixels changed.
What image formats are supported?
JPEG, PNG, WebP, GIF, SVG, AVIF, and any other format your browser can render natively. Drag and drop files or use the browse button to select them from your device.
Resources
- Mozilla MDN — Canvas API — Complete reference for the browser Canvas API used for pixel-level image manipulation in this tool.
- pixelmatch — npm — The open-source pixel comparison library powering the Diff mode; uses perceptual color distance and antialiasing detection.
