whatisgithub

What is pixelmatch?

mapbox/pixelmatch — explained in plain English

Analysis updated 2026-06-24

6,810JavaScriptAudience · developerComplexity · 2/5Setup · easy

In one sentence

A tiny JavaScript library that compares two images pixel by pixel to count visual differences, mainly used in automated tests to catch unintended UI changes between software versions.

Mindmap

mindmap
  root((pixelmatch))
    What it does
      Compare two images
      Count pixel differences
      Output diff image
    How it works
      Perceptual color formula
      Ignores anti-aliasing
      Configurable threshold
    Use cases
      Visual regression tests
      Screenshot comparison
      CSS change detection
    Setup
      No dependencies
      Node.js and browser
      CLI included
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Add visual regression tests to a web app that fail automatically when a UI component changes unexpectedly between releases

USE CASE 2

Generate a diff image highlighting exactly which pixels changed between two screenshots of the same page

USE CASE 3

Compare before-and-after screenshots from the command line to check if a CSS change broke any page layouts

What is it built with?

JavaScriptNode.js

How does it compare?

mapbox/pixelmatchcovid19india/covid19india.github.ioapollographql/react-apollo
Stars6,8106,8096,801
LanguageJavaScriptJavaScriptJavaScript
Setup difficultyeasyeasyeasy
Complexity2/52/52/5
Audiencedeveloperdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

So what is it?

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.

Copy-paste prompts

Prompt 1
Write a Node.js script using pixelmatch that compares two PNG screenshots and saves a highlighted diff image showing all changed pixels
Prompt 2
I have two screenshots as PNG files. How do I use the pixelmatch CLI to compare them and get the count of different pixels?
Prompt 3
Add a pixelmatch visual regression test to my Jest test suite that compares a rendered React component against a saved baseline image
Prompt 4
My pixelmatch comparison is flagging too many false positives on smooth curved edges. How do I adjust the threshold and anti-aliasing settings to reduce noise?

Frequently asked questions

What is pixelmatch?

A tiny JavaScript library that compares two images pixel by pixel to count visual differences, mainly used in automated tests to catch unintended UI changes between software versions.

What language is pixelmatch written in?

Mainly JavaScript. The stack also includes JavaScript, Node.js.

How hard is pixelmatch to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is pixelmatch for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.