Skip to content

How to compare two images pixel by pixel

The checker draws both images onto one canvas, walks every pixel and paints the ones that differ beyond the threshold into a difference map. The comparison happens in Canvas memory inside the page: neither image is uploaded, and the page keeps working offline.

The canvas is not the file. Both images are stretched to one shared size before the first pixel is compared, so the result describes how the two images look at that size — not whether their bytes are identical.

  1. Add exactly two images with the picker or by dropping them on the drop zone. PNG, JPEG, WebP, GIF, BMP and SVG files load; anything else is refused with “That file type is not supported here.” and does not disturb the files already chosen.
  2. Put the file that should define the canvas first with the ↑ and ↓ arrows: “Match first image” takes its size from the first row of the list.
  3. Choose the Comparison canvas — Match first image, Match second image or Largest dimensions.
  4. Set the Pixel threshold (0–255), the per-pixel difference a pixel has to exceed to count as changed. The field starts at 24.
  5. Press Compare images for the Before, After and Difference previews and the four metrics. Download diff PNG saves the map; Clear empties the list, the previews and the export together.

Threshold, canvas size and the difference map

What counts as a changed pixel

Red, green, blue and alpha are compared separately for every pixel and the largest of the four differences decides. That value has to be strictly greater than the threshold: at the default 24 a one-pixel +10 step in the red channel is ignored and the run reports 0 changed pixels, while the same pair at threshold 5 reports 1 changed pixel out of 64 (1.56%).

Alpha is part of the comparison, not only the colour. Two 4 × 4 squares with the same colour but one step of transparency between them counted as 16 of 16 changed pixels at threshold 0.

Average delta is the mean of the four channel differences over the whole canvas, so it stays small when the changed area is small: a single one-step pixel on a 64-pixel canvas rounds to 0.00 / 255 even though Changed pixels reads 1.

The comparison canvas and its limits

Match first image compares on the first image’s width and height, Match second image on the second’s, and Largest dimensions on the wider and the taller of the two. Both images are stretched onto that canvas, so a 4 × 8 and an 8 × 4 pair compared as 8 × 8 under Largest dimensions.

The canvas is capped at 4096 pixels on its longest side and 16,000,000 pixels in total; a 5000 × 100 pair was compared at 4096 × 82. The Dimensions metric always reports the canvas that was actually compared, not the size of the two input files.

In the difference map changed pixels are solid pink over a dimmed greyscale copy of the first image, which is why the preview still reads as the picture you are comparing.

What leaves the page

Nothing. Both images are decoded by the browser’s own image loader and compared in Canvas memory, and the difference PNG is produced by the canvas itself before it reaches the download dialog. A probe run that watched the network saw no request while files were added, compared, downloaded or cleared.

The numbers describe exactly one canvas: changing the threshold, the canvas choice or the order of the two files changes the result, and every new run replaces the previous one. Clear resets the list, the four metrics and the three previews, and it removes the finished PNG from the Download button.

Recent tools: