ODIFF
The fastest* (one-thread) pixel-by-pixel image difference tool in the world.
Why Odiff?
ODiff is a blazing fast native image comparison tool. Check benchmarks for the results, but it compares the visual difference between 2 images in milliseconds. It was originally designed to handle the "big" images. Thanks to OCaml and its speedy and predictable compiler we can significantly speed up your CI pipeline.
Demo
| base | comparison | diff |
|---|---|---|
 |
 |
 |
 |
 |
 |
 |
 |
 |
Features
- ✅ Cross-format comparison - Yes .jpg vs .png comparison without any problems.
- ✅ Support for
.png,.jpeg,.jpg, and.tiff - ✅ Supports comparison of images with different layouts.
- ✅ Anti-aliasing detection
- ✅ Ignoring regions
- ✅ Using YIQ NTSC transmission algorithm to determine visual difference.
Coming in the nearest future:
- ⏹ Reading image from memory buffer
- ⏹ Reading images from url
Usage
Basic comparison
Run the simple comparison. Image paths can be one of supported formats, diff output can only be .png.
odiff <IMG1 path> <IMG2 path> <DIFF output path>Node.js
We also provides direct node.js binding for the odiff. Run the odiff from nodejs:
const { compare } = require("odiff-bin");
const { match, reason } = await compare(
"path/to/first/image.png",
"path/to/second/image.png",
"path/to/diff.png"
);Cypress
Checkout cypress-odiff, a cypress plugin to add visual regression tests using odiff-bin.
Visual regression services
LostPixel – Holistic visual testing for your Frontend allows very easy integration with storybook and uses odiff for comparison
Argos CI – Visual regression service powering projects like material-ui. (It became 8x faster with odiff)
Visual Regression Tracker – Self hosted visual regression service that allows to use odiff as screenshot comparison engine
OSnap – Snapshot testing tool written in OCaml that uses config based declaration to define test and was built by odiff collaborator.
Api
Here is an api reference:
CLI
The best way to get up-to-date cli interface is just to type the
odiff --helpNode.js
NodeJS Api is pretty tiny as well. Here is a typescript interface we have:
export type ODiffOptions = Partial<{
/** Color used to highlight different pixels in the output (in hex format e.g. #cd2cc9). */
diffColor: string;
/** Output full diff image. */
outputDiffMask: boolean;
/** Do not compare images and produce output if images layout is different. */
failOnLayoutDiff: boolean;
/** Return { match: false, reason: '...' } instead of throwing error if file is missing. */
noFailOnFsErrors: boolean;
/** Color difference threshold (from 0 to 1). Less more precise. */
threshold: number;
/** If this is true, antialiased pixels are not counted to the diff of an image */
antialiasing: boolean;
/** If `true` reason: "pixel-diff" output will contain the set of line indexes containing different pixels */
captureDiffLines: boolean;
/** If `true` odiff will use less memory but will be slower with larger images */
reduceRamUsage: boolean;
/** An array of regions to ignore in the diff. */
ignoreRegions: Array<{
x1: number;
y1: number;
x2: number;
y2: number;
}>;
}>;
declare function compare(
basePath: string,
comparePath: string,
diffPath: string,
options?: ODiffOptions
): Promise<
| { match: true }
| { match: false; reason: "layout-diff" }
| {
match: false;
reason: "pixel-diff";
/** Amount of different pixels */
diffCount: number;
/** Percentage of different pixels in the whole image */
diffPercentage: number;
/** Individual line indexes containing different pixels. Guaranteed to be ordered and distinct. */
diffLines?: number[];
}
| {
match: false;
reason: "file-not-exists";
/** Errored file path */
file: string;
}
>;
export { compare };