The short answer
Drop both images onto the tool below at once, or one after the other. The first one is the reference. Use Slider to drag between them, Side by side to see both complete, and Difference to get a heatmap: unchanged areas turn pale gray, changed pixels light up from yellow (small change) to red (large change). Under the images you see the share of changed pixels, their number, the largest difference and the rectangle that contains all changes. Press Download difference (PNG) to save the map.
Try it here: Compare Images
Open the full tool pageWhen a pixel comparison helps
- Design reviews: did the new export of a banner, icon or illustration change anything apart from the requested fix?
- Visual QA and regression checks: compare a screenshot of an app screen or web page before and after a code change and spot moved buttons, changed fonts or missing elements.
- Photo editing: see exactly what a retouch, a color correction or a filter changed.
- Compression and upscaling: compare a compressed or enlarged image with the original and judge where quality was lost.
- Spot the difference: find small changes between two versions of a document scan, a map or a puzzle picture.
Slider, side by side or difference
The three views answer different questions. The slider lays the second image exactly over the first; dragging the handle reveals one or the other. Your eye is very good at noticing what moves while you drag, so this is the most intuitive view for color, sharpness and retouching.
Side by side shows both images completely, each in its own proportions. It is useful when the overall impression matters, for example two layout variants, and also for images of different shapes.
Difference is the objective view. It compares every pixel of the two images and does not miss a change of a single pixel that the eye would overlook. The dashed frame around the changes helps you find them in a large screenshot, even when only a few pixels in one corner differ. Switch back to the slider afterwards to judge whether a change you found actually matters.
| Question | Best view |
|---|---|
| Does the new version look better? | Slider |
| Which of two layouts works? | Side by side |
| Did anything change, and where exactly? | Difference |
| How much changed, in numbers? | Difference (statistics) |
Reading the numbers
Changed pixels is the share of the image whose difference is above the threshold. Number of pixels is the same as an exact count. Largest difference shows the strongest change on a scale from 0 (identical) to 100 (black against white). Changed area is the smallest rectangle that contains all changed pixels, with its size and the position of its top left corner, in pixels of the first image.
The difference of a pixel is the largest change in any of its color channels or its transparency. That means a pixel that changed from light gray to light blue counts as clearly changed, even if its brightness is similar, and a change in transparency alone also counts.
Threshold and compression noise
Two images that look identical can still differ in thousands of pixels. JPG and WebP compression changes pixel values slightly every time a file is saved, and so do resizing, color profile conversions and screenshots taken with different scaling. These invisible changes are noise for most comparisons.
Threshold sets the size of difference that is ignored, from 0 to 100. At 0 every change counts. A value of 5 to 15 hides compression noise and keeps real changes such as moved elements, new text or a different color. If you compare two exports of a lossless PNG from the same design tool, keep it at 0; if you compare two JPGs, start at 10.
Images of different sizes
A pixel comparison needs both images on the same grid. If the second image has a different size, the tool scales it to the size of the first and tells you so under the results. When the proportions also differ, the second image is stretched, and the note says that too. Scaling introduces small differences along edges, so for exact checks compare images with identical dimensions, for example screenshots taken at the same window size and zoom.
Swap makes the second image the reference. The images never leave your device: both are decoded and compared in your browser, so you can compare confidential designs and unreleased screens without uploading them.