The Image Diff Tool compares two images at the pixel level, producing a heatmap that highlights every changed area. Useful for catching design changes, validating A/B test visuals, detecting watermarks, or confirming before/after edits.
A Original Image
Click or drag to upload original
B Modified Image
Click or drag to upload modified
Diff Result
Hot pink = changed pixels. Dimmed grayscale = matching pixels.
How to Use the Image Diff Tool
The Image Diff Tool compares two images at the pixel level and produces a visual heatmap highlighting exactly what changed. It's useful for photographers checking retouching, designers verifying mockup changes, developers comparing screenshot regressions, and anyone who needs to know precisely what's different between two images.
Step 1: Upload Both Images
Click the upload area or drag and drop your images into the Original (A) and Modified (B) panels. Any browser-supported format works: JPEG, PNG, WebP, GIF, or BMP. For best comparison accuracy, use images of the same dimensions — the tool will scale them to match if needed.
Step 2: Adjust Sensitivity
The sensitivity slider controls the threshold for what counts as a "different" pixel. Set it low (high sensitivity) to detect even subtle color shifts — useful when comparing lightly retouched photos. Set it higher to ignore minor differences like JPEG compression artifacts, which cause small random pixel variations between saves.
Step 3: Choose Your View Mode
Three view modes are available. Diff Heatmap renders matching pixels as dimmed grayscale and changed pixels in hot pink — the most useful mode for seeing exactly what changed. Overlay places image B semi-transparently over image A, letting you compare them by adjusting opacity. Side by Side shows both images at the same scale for manual visual comparison.
Step 4: Read the Stats
The stats row shows total pixels compared, the count and percentage of different pixels, and the comparison dimensions. A 0.1% difference on a 12MP photo represents about 12,000 changed pixels — visible in the heatmap even if imperceptible to the naked eye.
Step 5: Download the Diff Image
Click "Download PNG" to save the diff heatmap as a PNG file. This is useful for including in bug reports, design review documents, or before/after case studies.
FAQ
Is the Image Diff Tool free?
Yes, completely free with no account required. All image processing happens in your browser — your images are never uploaded to any server.
Are my images private when using this tool?
Yes. The pixel comparison runs entirely in client-side JavaScript using Canvas API. Your images never leave your device and are not stored anywhere.
What image formats are supported?
Any image format your browser supports: JPEG, PNG, WebP, GIF, BMP, and SVG. For best results use the same format for both images.
What does the heatmap show?
The heatmap highlights pixels that are different between the two images. Changed pixels appear in hot pink/red, while matching pixels are shown dimmed in grayscale. The brighter the color, the greater the difference.
What is the sensitivity slider for?
The sensitivity (threshold) slider controls how different two pixels need to be before they're counted as changed. A low threshold (high sensitivity) catches even subtle color shifts. A high threshold ignores minor differences like JPEG compression artifacts.
Can I compare images of different sizes?
Yes. The tool scales both images to the same dimensions for comparison. Note that comparing images of very different sizes may produce inaccurate results — best results come from comparing images at the same resolution.