Compare two images

Why compare with a slider

Two images next to each other are surprisingly hard to judge. Your eyes jump between them, the brain fills in the gaps, and small differences in sharpness or colour simply go unnoticed. A slider puts both versions in exactly the same spot on screen, so when you drag the divider, anything that changes between them flickers into view right at the line.

That makes it useful whenever one image is a processed version of another:

• Checking whether a compression setting introduced visible artifacts before you apply it to a whole folder.
• Comparing two export settings from a photo editor, such as JPG at 80 versus WebP at 75.
• Seeing what an AI upscale or background removal actually changed.
• Reviewing a retouched portrait against the raw file.
• Spotting differences between two nearly identical versions of a design or screenshot.

How the view is built

Drop or pick two images at once; the first two files you provide are used. The first is laid out at the full width of the page and the second sits exactly on top of it, scaled to the same frame. Dragging (or tapping) moves the divider: the second image shows to the left of the handle, the first to the right.

Below the slider, two cards list the pixel dimensions and file size of each image. Together they answer the real question behind most comparisons: is the saving in kilobytes worth the difference you can see.

A few details worth knowing:

• The order in which files arrive depends on how you select them. If you are not sure which side is which, read the file sizes on the cards; the processed version is usually the smaller one.
• Both images must decode in your browser. JPG, PNG, WebP and AVIF are accepted; convert HEIC photos first with HEIC to JPG.
• If the two images have different proportions, the second is scaled to cover the frame of the first and parts of it are cut off at the edges. Compare images with the same aspect ratio for a meaningful result.
• Nothing is uploaded. Both files are read directly from your device and stay in the page until you choose a new pair.

What to look at

Compression damage does not spread evenly across a picture. Move the divider slowly across these areas first:

1. Smooth gradients such as sky, studio backdrops or walls. Lossy formats show banding or faint square blocks here first.
2. Sharp edges against flat colour, like text, logos and building outlines. Look for halos, ringing or a fuzzy fringe.
3. Saturated reds and blues. JPEG stores colour at lower resolution than brightness, so strong red details smear before anything else.
4. Fine repeating texture such as hair, grass or fabric. Over-compressed images lose it first and it turns into a smooth smudge.
5. Dark shadows, where noise and blocks hide well on a dim screen but show up on a bright one.

Do this at the size the image will actually be viewed. On a phone, a level of compression that looks rough on a 27-inch monitor may be invisible.

A practical routine for choosing settings

The comparison is most useful as part of a short test loop:

1. Pick one representative image from the batch, ideally one with sky, skin and some fine detail.
2. Export it twice with different settings, for example with JPG compression at 80 and at 65.
3. Load the original and the lower setting. If you cannot see a difference along the five areas above, the lower setting is safe.
4. If you can, load the original and the higher setting and repeat.
5. Apply the winning setting to the whole batch.

The same approach works for PNG palette levels, WebP quality and resizing. When two candidates look identical, the file sizes on the cards decide: take the smaller one.