Image Diff

Features

• Compare two images pixel by pixel and get a single diff image
• Adjustable threshold (0-255): differences below it are ignored
• Optionally ignore isolated anti-aliasing pixels and count them separately
• Colour darker and lighter pixels separately, with custom colours
• Diff-only mode writes a transparent PNG you can overlay on the original
• Zoom 1x / 2x / 4x for detail (nearest-neighbour, so blocks stay crisp)
• Mismatched sizes raise an error instead of silently aligning at the top-left
• The card reports the changed pixel count, the total, and the ratio
• Runs entirely in your browser - images are never uploaded

How to use

1. Choose exactly two images
2. Adjust the threshold, colours and zoom as needed
3. Read the diff image and the changed ratio on the card

FAQ

Why must the two images be the same size?

Because a diff pairs pixel with pixel: A at (100, 50) against B at (100, 50). When the sizes differ there is no such pairing. You could stack them at the top-left corner, but then the whole overhang would be judged as added in B and marked in colour, and the resulting 90 percent would have nothing to do with the change you are looking for - while looking entirely plausible, which is far harder to notice than an error. So this tool refuses instead. Crop or scale both to the same size first.

What exactly does ignore anti-aliasing ignore?

The rule is directional agreement: a pixel that truly changed has at least one of its four neighbours changing the same way (same dominant channel, same sign). Anti-aliasing and resampling produce isolated differences: one pixel taking an intermediate value with no aligned neighbour. So contiguous or line-shaped changes always have an aligned neighbour and are kept; only an isolated pixel is treated as anti-aliasing or noise, ignored, and counted in the note. Turn the switch off and no such filtering happens - every pixel above the threshold counts.

How is the changed percentage computed?

The denominator is the total pixel count (width times height); the numerator is the number of pixels left after the threshold and the optional anti-aliasing filter. It is written as a percentage with two decimals. The card also shows both numbers (for example 1200 / 2400000 px), so it is clear where the percentage comes from. The zoom level does not affect the ratio - it only changes the size of the output image.

How do I use the transparent diff?

Download it and overlay it on the first image (most viewers and design tools support layers). The changed pixels are coloured and everything else is fully transparent, so the differences stand out at a glance. To see the differences composited on the original directly, turn off diff-only mode - then they are drawn on the first image itself.