Image Comparison

How to compare two images

1. Drop the first picture on Image A (before) and the second on Image B (after), or click each zone to choose a file. JPG, PNG, WebP, GIF, BMP, SVG and any other format your browser can open are accepted.
2. Pick a View: Side by side, Slider, Onion skin or Difference.
3. If the two pictures don’t have the same size, choose what happens under When sizes differ: Scale B to the size of A, Original size, aligned top left or Original size, centered.
4. Zoom with the mouse wheel, a two-finger pinch, the + and − buttons or the + and − keys, and drag to pan. Every panel follows the same zoom and position, so you always look at the same spot in both images. Fit to view shows the whole picture again.
5. In Difference view, set the Tolerance and the Difference measure, then read the results below the picture. Download difference (PNG) saves the highlighted map.

Swap A and B exchanges the two pictures; Clear starts over.

The four views

• Side by side shows A on the left and B on the right, with synchronized zoom and pan. It is the easiest way to judge overall look, color and sharpness.
• Slider stacks the two images and reveals B to the right of a vertical divider. Drag the divider line on the picture, click where you want it, or use the Slider position control (it also works with the arrow keys). This is the classic before/after view for retouching, restoration, upscaling or compression tests.
• Onion skin lays B over A with an adjustable Opacity of B. Sliding from 0 % to 100 % makes misalignments, shifted elements and moved text jump out.
• Difference paints every pixel that changed in bright red over a faded grey copy of image A. Identical areas fade into the background, so even a one-pixel change is easy to spot when you zoom in. Zoomed in far enough, pixels are shown as sharp squares rather than smoothed.

How the difference is measured

Each pixel of A is compared with the pixel at the same place in B. Colors are first multiplied by their opacity, so two fully transparent pixels count as equal even if their hidden color differs.

• Largest channel difference takes the biggest gap among red, green, blue and alpha, on a 0 to 255 scale. A value of 12 means that at least one channel moved by 12 levels.
• Color distance (RGB + alpha) is the straight-line (Euclidean) distance between the two colors, divided by 2 so that it also runs from 0 to 255. It reacts more to changes spread over several channels.

A pixel counts as changed when its difference is greater than the Tolerance. At 0, any change at all is reported, which is ideal for checking that two exports are truly identical. A tolerance of 5 to 15 ignores the tiny noise added by JPEG or WebP compression and keeps real edits.

The results show both image sizes, the Compared area, the Share changed as a percentage, the number of Changed pixels, the Largest difference found and the Changed region: the smallest rectangle that contains every changed pixel, with its top-left corner.

Images of different sizes

With Scale B to the size of A, B is stretched to exactly A’s width and height, which suits a resized or recompressed copy of the same picture. With the two Original size options, both images keep their own pixels in an area large enough for both; parts covered by only one image count as changed. Pictures larger than 4096 pixels on their longest side are compared at a reduced size, and a message tells you so.

Both files are read and compared in your browser; they are never uploaded.