Compare two images

How to compare two images

1. Open both images. Tap First image and Second image, drop a file on each box, or copy a picture and paste it (Ctrl+V, ⌘V on a Mac) to fill the empty slot. ⇄ swaps them.
2. Line them up if the sizes differ. The page states both sizes. Fit second to first scales the second to the first's size (right for a 2× export of the same design), Align top-left or Centre keep it at its own size (right for a screenshot with an extra row at the bottom).
3. Look. Slider: drag the divider. Onion skin: fade the second over the first. Blink: the eye catches a change that flickers. Side by side: zoom into one spot of both at once.
4. Find every change. Difference paints changed pixels in the highlight colour, counts them, and lists a box for each changed area. Raise the tolerance until noise disappears; tick Ignore anti-aliasing for screenshots of text.
5. Export. Export difference PNG saves the highlighted picture at the first image's size, to attach to a bug report or a review.

What it cannot do

• It compares pixels, not meaning. A button moved 20 px to the right counts as two changed areas, where it was and where it is now, and a photo shifted by one pixel shows almost every edge as changed. It cannot say "the logo moved"; you read that from the boxes.
• It does not compare PDFs page by page. Compare PDF does: it lists the changed words with their pages and boxes what changed on each page. Or render each PDF to images first with PDF to JPG (use PNG output if offered, so there is no JPEG noise), then compare page against page here. To compare the words of two documents, Diff Checker is the right tool.
• It does not line up photos that were taken twice. A different angle, zoom or crop is not detected or corrected; only the three alignments above are offered.
• Different sizes are scaled with the browser's smoothing. Fit second to first resamples, which changes edge pixels by a few levels; a tolerance of 8 or more hides that. Animated GIFs and videos are compared by their first frame only.
• Very large images are scaled down. Pictures over 16.7 megapixels are compared at a reduced size (iPhone Safari cannot hold a larger canvas), and the page says so.

How the numbers are worked out

Changed pixel. For each pixel the page takes the largest of the four differences in red, green, blue and alpha (each 0-255). If that is above the tolerance, the pixel is changed. At tolerance 0, a pixel that went from (200, 180, 160) to (201, 180, 160) is changed; at tolerance 3 it is not.

Percentage. Changed pixels divided by all pixels of the first image. A 10 × 10 px change on a 200 × 100 px picture is 100 of 20,000 pixels, 0.5 %. If the second image does not cover part of the first (with Align top-left or Centre), that part counts as changed.

Anti-aliasing. With the option ticked, a changed pixel is skipped when, in either image, it is an in-between shade on an edge: lighter than its darkest neighbour, darker than its lightest, with at most two identical neighbours, and with the neighbouring flat colour unchanged in both images. That is the soft rim that font smoothing and scaling put on text and shapes. A real change of colour inside a shape is still counted.

Boxes. Changed pixels that touch (including diagonally) form one area. Two areas whose boxes have no more than the merge gap of unchanged pixels between them, across and down, then share one box. Two 10 px blocks with 50 px of unchanged pixels between them get two boxes at a gap of 10 and one box at a gap of 60.

Questions

How do I compare two images for differences?

Open both images on this page and choose Difference. Every pixel that changed by more than the tolerance is painted in the highlight colour over a faded copy of the first image, the result line gives the number and percentage of changed pixels, and each changed area gets a box with its x, y, width and height. For JPEGs or screenshots from different machines, raise the tolerance to about 10-20 so compression noise is not counted.

How can I compare two images side by side online?

Choose Side by side. The two images sit next to each other (above each other on a phone) and share one zoom and pan: zoom with the + and - buttons or the mouse wheel and drag either picture, and the other follows, so you look at the same pixels in both. The pictures are opened in your browser; nothing is sent to a server.

How do I compare two images with a slider?

Choose Slider and drag the divider across the picture: the first image shows on the left of it and the second on the right. Switch to Top / bottom to move the divider up and down instead. The range control under the picture does the same with the keyboard's arrow keys.

Can it compare two images for similarity?

It measures how many pixels are the same: 100 % minus the changed percentage is the share of identical pixels at your tolerance. That is a strict, literal similarity. It does not judge whether two photos show the same thing: a re-taken photo of the same scene, a crop, or a picture shifted by a few pixels will show as mostly changed even though a person would call them similar.

Is this image comparison tool free to use online?

Yes. There is no account, no limit on how many pairs you compare and no watermark on the exported difference image. It is free because it costs almost nothing to run: the comparison happens in your own browser with the canvas API, so your images are never uploaded or stored.