Image comparison (before and after slider)

Compare two pictures with a before/after slider, a difference view and real numbers.

View

Add both pictures to compare them.

Drag the divider, or focus it and use the arrow keys (Shift for 10%). When zoomed in, drag the picture to move around; both sides move together.

Files

What this tool does

Add an original and a new version of a picture, for example a photo before and after compression, retouching or resizing, and compare them three ways:

  • Slider: the two pictures on top of each other with a divider you drag (or move with the arrow keys). Left of the divider is the original, right of it the new one.
  • Side by side: both at once, the same part of each.
  • Difference: black where the pixels are equal, brighter where they differ (amplified four times, so faint compression noise becomes visible).

Zoom to 2×, 4× or 8× and drag to move around: both pictures move together, so you always look at the same pixels. Next to the pictures the tool shows each file's size and dimensions, how much smaller the new one is, and measured differences: PSNR, SSIM, mean difference and the share of pixels that changed visibly. Export the comparison as one PNG (split at the divider, side by side or the difference map) for a review or a bug report. Both pictures stay on your device.

What the numbers mean

  • PSNR (peak signal-to-noise ratio, in dB) measures the average error between the pictures: higher is closer. Identical pictures have infinite PSNR. Around 40 dB and above, differences are usually invisible at normal size; below about 30 dB they usually show.
  • SSIM (structural similarity, 0 to 1) compares local patterns of brightness, contrast and structure in 8 × 8 windows, which follows what the eye notices better than PSNR. 1 means identical; above 0.98 is usually indistinguishable.
  • Mean difference is the average change per colour channel on the 0 to 255 scale.
  • Pixels visibly changed counts pixels where any channel moved by more than 8 levels.

The two can disagree, and that is informative. JPEG's chroma subsampling, which stores colour at half resolution, lowers PSNR a lot on saturated pictures while SSIM, computed on brightness, barely moves. The article on comparing compressed images has measured examples. The numbers are computed on a copy of at most 1,024 pixels on its longest side so they stay quick; the views and the export use the pictures at up to 4,096 pixels.

Steps

  1. Choose the original (before) and the new version (after). They can be different formats; if the sizes differ, the second is scaled to the first for the comparison and the tool says so.
  2. Drag the divider, or switch to side by side or difference.
  3. Zoom in on detail that matters: faces, text, gradients, edges.
  4. Read the numbers and the size saving, then export the comparison if you need to show someone.

Good uses

  • Choosing a JPEG or WebP quality: make two or three versions with the image toolkit, compare each with the original, and keep the smallest that still looks right.
  • Checking that an "optimised" image really is unchanged where it should be.
  • Showing a retouch, a colour grade or a restoration before and after.
  • Spotting what changed between two screenshots or two exports of a design.

Frequently asked questions

Are my pictures uploaded?

No. Both are decoded and compared by your browser, and the exported PNG is made on your device.

Which is better, PSNR or SSIM?

SSIM usually agrees better with what people see, because it compares structure in small windows. PSNR is a simple average error. Use both: a low PSNR with a high SSIM often means colour or smooth-area changes that are hard to see.

Can I use the slider with a keyboard?

Yes. Tab to the divider and use the arrow keys (Shift for 10% steps), Home and End. Screen readers hear it as a slider with its position.

What if the two pictures have different sizes?

The second one is scaled to the first one's size so the same points line up. The numbers then include the resizing, which the tool notes.

Why does the difference view look black?

Because the pictures are almost identical. Differences are already amplified four times; zoom in to find small changes.