Image Diff
Compare two images pixel by pixel and highlight what changed
Upload Image 1
Click or drop here
Upload Image 2
Click or drop here
🔒 Images never leave your browser. All comparison is done locally using the Canvas API.
What Is a Pixel Diff?
A pixel diff (pixel difference) is a technique for comparing two images by examining corresponding pixels and quantifying how much they differ. For each pixel position, the tool calculates the sum of absolute differences across the red, green, and blue color channels. If this value exceeds a configurable threshold, the pixel is marked as "changed" and highlighted. If the value is below the threshold, it is considered unchanged.
The result is a composite image where changed areas are shown in a vivid highlight color (red/pink in this tool) while unchanged areas are dimmed — making it instantly obvious where the two images differ, even if the differences are subtle.
Use Cases for Image Diffing
UI regression testing. When you make changes to a web app or mobile app, you can take screenshots before and after, then diff them to verify that only the intended elements changed. This catches unintended layout shifts, color changes, or missing elements that might be missed in a visual inspection.
Before/after design comparisons. Designers use image diffs to show clients exactly what changed between design iterations — useful for version control and design review sessions where subtle changes need to be clearly communicated.
Photo editing verification. Photographers and retouchers can diff original and edited versions to see exactly which areas were adjusted — useful for quality control and for communicating scope of edits to clients.
Choosing the Right Threshold
The threshold controls how sensitive the comparison is. A threshold of 0 would mark any pixel as different if even a single color channel differs by 1 value — this would flag JPEG compression artifacts as differences even when the images are visually identical. A threshold of 10 (the default) ignores very small color differences caused by lossy compression while still catching real visual changes. A threshold of 30–50 is appropriate when comparing images that may have been saved with different JPEG quality settings and you only want to highlight large, obvious differences.
If you're comparing lossless images (PNG to PNG) or screenshots from the same tool, a lower threshold (1–5) is appropriate. For JPEG comparisons, start at 10 and adjust upward until compression noise disappears from the diff.