Compare two images pixel by pixel

Pixel-level image comparison for quality assurance

Image comparison overlays two pictures and highlights every pixel that differs between them. The result is a heatmap where unchanged areas appear dark and modified areas glow in a highlight color. This makes it immediately obvious where changes occurred, even when they are too subtle for the human eye to catch in a side-by-side view.

Visual QA teams use image diffing to catch unintended changes in UI screenshots between releases. A single-pixel shift in a button position, a slightly different font rendering, or an unexpected color change shows up clearly in the diff heatmap. This is faster and more reliable than manual visual inspection of hundreds of screenshots.

The difference threshold controls sensitivity. At threshold 0, even a single bit of difference between two pixels is flagged. This catches everything but also highlights JPG compression noise and anti-aliasing differences that are not meaningful changes. Raising the threshold to 10-30 ignores these minor variations and only flags substantial visual differences.

The tool reports both the total count of differing pixels and the percentage of the image area that changed. A diff ratio below 0.1% usually indicates compression artifacts rather than real changes. Ratios above 1% typically represent intentional modifications or rendering differences worth investigating.

Common use cases

• UI regression testing: Compare screenshots of web pages or app screens between releases to catch unintended visual changes in layout, typography, colors, or component rendering.
• Design review and approval: Overlay a designer's mockup with the developer's implementation to verify pixel-perfect accuracy and identify areas that need adjustment.
• Print proof verification: Compare a print proof scan with the original digital file to detect color shifts, alignment issues, or artifacts introduced during the printing process.
• Photo editing verification: Compare before and after versions of edited photos to verify that retouching was applied only to intended areas without accidentally affecting other regions.

Technical details

Comparison method

Per-pixel RGB channel comparison. The absolute difference of each channel (R, G, B) is calculated. If any channel exceeds the threshold, the pixel is marked as different.

Threshold

A per-channel tolerance value (0-255). Differences below this value are ignored. Useful for filtering out JPG noise, anti-aliasing, and sub-pixel rendering differences.

Heatmap output

Differing pixels are highlighted in a configurable color (default: red/magenta) against a darkened version of the original. The intensity indicates the magnitude of difference.

Size handling

Both images are rendered onto a shared canvas at the larger dimensions. If sizes differ, the smaller image is padded, and the size difference itself counts as differing pixels.

How to compare two images online

Spot the differences between two pictures with a pixel-level heatmap.

1. Drop image A and image B into the tool.
2. Adjust the difference threshold to ignore minor noise.
3. Click Compare images to render a diff heatmap.
4. Review the changed pixel count and download the heatmap if needed.

Frequently asked questions