pixelmatch

Pixelmatch is a small JavaScript library that compares two images pixel by pixel and tells you how many pixels differ between them. Its main use is in automated testing, where you want to catch visual changes in screenshots between software versions. When the comparison runs, it can produce a third image showing exactly which pixels changed, with the differences highlighted in a color you configure.

The library takes raw image data as input rather than file paths, which keeps it free of dependencies and makes it fast. You pass in the pixel arrays from both images plus a target array for the diff output, along with the width and height. It returns the count of mismatched pixels. The comparison uses a perceptual color difference formula, which means it accounts for how human eyes perceive color rather than comparing raw numbers, reducing false positives on subtle differences. It also detects anti-aliased pixels (the softened edge pixels that rendering engines add to smooth diagonal lines) and ignores them by default, since those often differ slightly without representing a meaningful visual change.

You can tune sensitivity with a threshold option ranging from 0 to 1. Lower values catch smaller differences. Other options control the color used for highlighted pixels in the diff output, whether to treat anti-aliased pixels as errors, and how transparent unchanged pixels appear in the diff image.

Pixelmatch works in both Node.js (the server-side JavaScript runtime) and directly in web browsers. It can be installed via npm or loaded from a CDN. A command-line tool is also included for comparing PNG files without writing any code, using a simple four-argument command.

The library is around 150 lines of code and has no external dependencies.