Image Diff
Pixel-wise difference between two same-sized images.
Overview
The Image Diff tool compares two images of identical dimensions and produces a visual map of every pixel that differs. Upload an "expected" and an "actual" frame and the tool highlights mismatches in a bright contrast colour, alongside a numeric report of the total number of changed pixels and the average per-channel delta.
This is the classic move when investigating visual-regression failures in a CI pipeline, reviewing screenshot snapshots before merging a PR, or auditing whether a re-encode introduced subtle banding. It also helps when checking whether two near-duplicate photos really are byte-identical.
How it works
The comparator iterates the two pixel buffers in lockstep. For each position it computes the absolute per-channel difference and writes one of three outputs: the original pixel where the delta is below a small tolerance, a tinted version where the delta is non-zero but small, and a bright marker colour where the delta exceeds a configurable threshold.
Optional anti-aliasing detection treats neighbour pixels that exhibit a smooth gradient transition as expected rather than flagged, which is the trick used by tools like pixelmatch to avoid false positives around font edges and rounded corners. The output is a PNG so the highlight colours stay crisp.
Examples
Expected: screenshot-baseline.png (1280x720)
Actual: screenshot-current.png (1280x720)
Diff PNG → 312 mismatched pixels in a 28x42 region near the header,
consistent with a moved badge component.
Expected: hero-v1.jpg
Actual: hero-v2.jpg
Diff PNG → uniform speckle across the frame → JPEG re-encode noise,
not a real visual change.
FAQ
Why are anti-aliased text edges flagged as different?
Sub-pixel rendering can shift glyph edges by one pixel even when the rasteriser is deterministic. Enable the anti-aliasing tolerance to suppress those edges.
What if the images differ in size?
The comparator rejects mismatched dimensions. Resize or crop both inputs to the same size first using the Image Resizer.
Is the diff perceptual or strict?
Strict by default — any per-channel delta above the threshold counts. For perceptual diffs in Lab space, a separate metric like SSIM is better suited.
Can I get a JSON summary instead of a PNG?
The tool returns both: the diff image plus a side panel reporting mismatched-pixel count and percentage of the frame.
Does it work on transparent PNGs?
Yes — alpha is compared along with RGB, so a change purely in transparency still surfaces in the diff.