Image Compare and Diff
Compare two images with a before/after slider, side by side, or a pixel difference map that highlights changes in red and reports the mismatch percentage.
Runs entirely in your browser. Your data is never uploaded.
Related Tools
View AllWhat is Image Compare?
Load two images and compare them three ways: a slider that reveals one over the other, side by side, or a difference map in which changed pixels are red. The tool counts the differing pixels and shows the mismatch percentage, with an adjustable per-channel tolerance to ignore tiny compression differences.
How to use Image Compare
- Drop or choose Image A (reference) and Image B (to compare).
- Switch between Slider, Side by side and Difference.
- Read the mismatch percentage and pixel count.
- Raise the Tolerance to ignore small differences such as JPEG noise.
Example
Two 40×20 images that differ only in the bottom-right quadrant (white vs black), tolerance 0
25% of pixels differ (200 of 800 pixels)
When to use Image Compare
Use it to spot changes between two versions of a design, screenshot or render, check compression artifacts, or do a quick visual regression check. It compares pixels at the same position, so shifted or rotated content counts as fully different; it is not a perceptual or structural similarity metric.
How Image Compare works
Both images are decoded to RGBA. If their sizes differ, image B is resampled to the size of image A (and a notice says so). Every pixel pair is compared: if the absolute difference of R, G, B or alpha exceeds the tolerance, the pixel counts as a mismatch and is painted red in the difference map; matching pixels are shown as faded grayscale of image A. Mismatch % = mismatched pixels ÷ total pixels × 100.
Common Use Cases
- Checking what changed between two UI screenshots.
- Comparing an original photo with its compressed version.
- Verifying that a re-exported asset is identical.
- Showing before/after edits with the slider.
Security Note
Images are decoded, processed and encoded locally in your browser with the Canvas API. Nothing is uploaded to a server.
FAQs
What happens if the images have different sizes?
Image B is resized to match image A before comparing, and a warning is shown. For exact results, compare images with the same dimensions.
What does the tolerance do?
A pixel only counts as different when one of its channels differs by more than the tolerance (0–255). Use 5–20 to ignore lossy compression noise.
Does transparency count?
Yes. The alpha channel is compared like the color channels.