About this tool
Image Diff compares two images pixel-by-pixel and highlights exactly where they differ, entirely in your browser. Drop a "before" screenshot or design mockup as Image A and an "after" version — a new screenshot, an implemented version of the same design, or a re-exported copy — as Image B. If the two images aren't the same size, both are placed onto a canvas sized to fit the larger one; any area covered by only one image counts as a difference, since a size change is itself something you'd want to catch. The result is a diff image: Image A rendered again with every pixel that changed painted in bright magenta, plus a running count and percentage of how many pixels differ.
This is a genuinely developer-oriented workflow: catching visual regressions by comparing two screenshots taken before and after a CSS or component change, checking an implemented UI against its original design mockup pixel-for-pixel, or spotting the subtle blockiness and banding a second round of JPEG/WebP compression adds to an image that's already been exported once. The sensitivity threshold controls how big a color change has to be before a pixel counts as different — lower values (closer to 0) flag almost any change, including 1–2 bit compression noise, while higher values only flag clearly visible differences, which is usually what you want when comparing two exports of the same source image. Nothing is uploaded: both images are decoded and compared with the Canvas API directly on your device, and the diff image you download is generated the same way.
Frequently asked questions
What happens if the two images are different sizes?
Both images are placed onto a common canvas sized to fit the larger of the two, and any area covered by only one of the images (because the other is smaller) counts as a difference — this correctly surfaces size mismatches as part of the comparison, rather than silently stretching one image to match the other (which would distort the comparison and hide the fact that they're different sizes in the first place).
What sensitivity threshold should I use?
A low threshold catches even tiny, subtle differences (useful for detecting compression artifacts or very minor rendering changes), while a higher threshold only flags obviously different pixels (useful for spotting significant visual changes like moved elements or different content, while ignoring minor anti-aliasing/compression noise between two otherwise-identical images). Start around the middle of the range and adjust based on whether you're seeing too much noise (raise it) or missing real differences (lower it).