Loading tool…
Spotting what changed between two versions of a screenshot, design or photo by eye is slow and unreliable. Load an A and a B image and switch between a swipe slider, synced side-by-side panes, an onion-skin overlay, a blink toggle and a true pixel difference, with hard numbers on how far apart they are.
Processing locally on your device
Overview
Each comparison mode answers a different question. The slider reveals A on the left and B on the right of a draggable divider, which is ideal for before-and-after edits. Side by side puts the two in separate panes, and at 100% or 200% zoom, dragging or scrolling one pane moves the other to the same spot. Overlay fades B over A with an opacity slider, so shifted or resized elements show up as ghosting. Blink swaps A and B every 500 ms in the same place, which makes small changes jump out, much as astronomers once spotted moving objects on photographic plates.
The difference mode subtracts the images pixel by pixel and shows the absolute difference per channel. Identical areas turn black and changes light up. Small differences such as JPEG noise are often too faint to see, so you can amplify them from ×1 to ×20. The threshold (0–128) treats any pixel whose largest channel difference is at or below it as unchanged, which hides compression noise and anti-aliasing. A highlight style instead paints every changed pixel solid magenta over a faded copy of A, making a map of exactly where things differ. The difference image downloads as a lossless PNG.
The numbers matter as much as the picture. Alongside each image’s dimensions and whether they match, the tool reports the percentage and count of pixels above the threshold, the largest difference found, the mean absolute error (MAE, the average per-channel difference on a 0–255 scale) and the PSNR in decibels. PSNR is a standard measure of how close a copy is to its original: around 30–40 dB is typical for good lossy compression, above about 45 dB is visually indistinguishable, and identical images report infinity.
A pixel diff only makes sense when the two images are the same size. When they aren’t, B is scaled to A’s dimensions by default, which suits comparing an export with its source. You can turn this off to align both top-left on a shared canvas instead. Everything runs on canvas pixel data in your browser, and very large pairs are compared at up to 16 megapixels. Confidential designs and unreleased screenshots never leave your device.
| Mode | How it works | Best for |
|---|---|---|
| Slider | Drag a divider: A on the left, B on the right | Before/after edits, client presentations |
| Side by side | Two panes with synced zoom and pan | Inspecting the same detail in both |
| Overlay | B faded over A with adjustable opacity | Spotting shifted or resized elements |
| Difference | |A − B| per pixel, amplified and thresholded | Visual QA, compression artifacts |
| Blink | A and B swap every 500 ms | Catching small, scattered changes |
Drop image A (the reference) and image B (the version to compare), or drop both onto A at once. Use the swap button to exchange them.
Pick a mode: Slider, Side by side, Overlay, Difference or Blink.
Set the zoom to Fit, 100% or 200%, and drag or scroll to pan. Side-by-side panes stay in sync.
Adjust the threshold to ignore tiny differences, and in Difference mode choose amplified or highlight style.
Read the changed-pixel percentage, MAE, PSNR and max difference, then download the difference PNG.
Use cases
Take before-and-after screenshots of a page at the same viewport size, then use the difference view with a small threshold. A changed-pixel figure of zero confirms nothing moved, and the highlight style pinpoints any button or margin that shifted.
Load the original as A and the compressed JPEG or WebP as B. PSNR and MAE tell you how much was lost, and amplifying the difference ×10 shows where. Blocky artifacts usually cluster around edges and in smooth gradients like skies.
When a designer sends an updated mockup, blink between the old and new versions or fade them in overlay to catch every moved icon, recoloured element and edited line of copy, even ones not mentioned in the changelog.
Use the slider at Fit or 100% zoom to walk a client through skin retouching, object removal or colour grading, dragging the divider across the frame to reveal the before and after.
Pro tips
Answers to common questions about the image compare.
Yes. By default B is resized to A’s dimensions, which works for a resized export and its source. Turn off “Scale B to A’s size” to align both images top-left on a canvas big enough for both. Areas covered by only one image then count as differences. A warning always shows when sizes differ.
For every pixel, the tool takes the largest difference across red, green and blue (0–255). If that value is at or below the threshold, the pixel counts as unchanged. It is excluded from the changed-pixel percentage and drawn black in the difference view. MAE and PSNR always use every pixel, regardless of the threshold.
Mean absolute error is the average per-channel difference on a 0–255 scale: 0 means identical, and 1–2 is typical for high-quality JPEG. PSNR is the peak signal-to-noise ratio in decibels, so higher means closer. Around 30–40 dB is good lossy compression, and identical images report infinity.
A difference of 3 or 4 levels out of 255 is nearly black and impossible to see. Multiplying by ×5 to ×20 brightens those small differences so compression patterns, dithering or a faint watermark become obvious. Amplification only changes the picture; the statistics stay the same.
Each pixel is compared as if composited over black, so a transparent area matches a black area. If you’re comparing PNGs with alpha, keep this in mind when transparent regions show up as identical or different.
No. ToolEnhancer processes files on your own device inside the browser. They are never sent to, stored on or seen by our servers.
Yes. The image compare is free to use with no sign-up, no watermarks and no daily limits.
Strip location and camera metadata from photos.
Pick any pixel colour from an image.
Extract dominant colours as HEX, RGB and HSL.
Inspect RGB and luminance histograms.
Encode images as data URIs for HTML and CSS.
Create QR codes with colours and logos.