Image Compare

What it's for

See exactly what changed between two versions of a picture: two screenshots of a page before and after a change, two exports of a design, or two photos that should be the same.

For example, when a page looks slightly off after an update, take a screenshot of each version and choose Differences: every changed pixel shows in magenta, boxed, so a one-pixel shift or a changed colour is easy to find.

How to use it

Choose the first picture (before) and the second (after); a file can also be dropped on the box it’s for. Then choose how to Show them:

• Differences: the first picture faded, with every pixel that differs in magenta and a box around them all. Tolerance ignores differences up to that much in any colour channel, for JPEG noise or slight shading.
• Slider: the first picture left of the line and the second right of it; move Position to wipe between them.
• Onion skin: the second picture laid over the first; Position sets how far it’s faded in.
• Side by side: both at once.

The message says how many pixels differ and where. Save this view as PNG saves what’s shown. The view and tolerance are remembered.

Example

Take two screenshots of the same window, moving one icon a little between them. Choose both and leave Differences selected: the icon’s old and new places show in magenta inside one box, and the message gives the count of changed pixels and the box’s corners.

Good to know

The pictures are compared at the first one’s size; a second picture of another size is stretched to fit, which changes most of its pixels. Pictures that are shifted or cropped differently show as different everywhere: this compares pixels in place, it doesn’t line them up. Neither picture leaves your browser.