What is an image diff?

An image diff compares two versions of an image pixel by pixel and marks every place where they differ. Developers use it for visual regression testing: a screenshot of a page before a code change is compared with one taken after it, so an unintended shift, a missing icon, or a changed color stands out even when the two screenshots look the same at a glance.

Tool description

This tool compares two images and draws a diff image: the differences in red over a faded copy of the first image. It counts the pixels that differ, groups nearby differences into regions, and measures the area they cover. Smoothed text and shape edges are detected as anti-aliasing and left out of the count, so a screenshot taken with a slightly different font renderer doesn't show up as a change. You can also drag a slider across the two images and zoom into both at once.

Features

  • Compare PNG, JPEG, WebP, GIF, BMP, and AVIF images
  • Counts the different pixels and shows them as a share of the image
  • Groups nearby differences into regions and can outline each region in the diff image
  • Skips anti-aliased pixels and marks them in a separate color, or counts them if you prefer
  • Adjustable threshold for how far apart two colors must be to count as different
  • Optional second color for pixels that got darker, to tell added content from removed content
  • Differences-only mode that draws the diff on a transparent background
  • Zoom up to 3200% with sharp pixels, and download the diff as a PNG image
  • Slider view that zooms and pans both images together, with a fullscreen mode
  • Compares images of different sizes by aligning them at the top left or by resizing the second one

How it works

The comparison uses pixelmatch, the open-source library behind many visual testing tools. For each pixel, it measures the color distance in the YIQ color space, which weighs brightness more than hue, as the eye does. A pixel counts as different when the distance is above the threshold. Before it counts one, pixelmatch checks the neighboring pixels to tell whether it's part of an anti-aliased edge. The tool reads the pixel values stored in the files and ignores embedded color profiles, so two files that decode to the same pixels always match. Everything runs in your browser, and the images are never uploaded.

Tips

  • Keep the threshold at 0.1 for screenshots. Lower it to 0 to catch every change, including JPEG compression noise; raise it to ignore small color shifts.
  • A photo saved as JPEG twice differs in thousands of pixels by a tiny amount. If the result says no differences above the threshold, the images look the same.
  • Turn on Mark darker pixels to see which content was added and which was removed, since text on a light background gets darker where it appears.
  • For GIF files, only the first frame is compared.