Free browser tool

Image comparison slider

Overlay two images and compare before/after with an interactive slider.

Input and settings

How to use it

Overlay two images in the same viewer and move a boundary slider to compare Before vs After. It is designed for visual inspection of edits, compression or design revisions.

Choose Image A and Image B. The comparison appears automatically once both are loaded.
Move the Comparison slider from left to right.
Inspect the changing boundary to spot visible differences.

Image A: Displayed underneath
Image B: Overlaid and revealed up to the slider position
Boundary: 0–100%
Output: Viewer only; no comparison image file is generated

Compare an original photo with a compressed version

Put the original in A and the compressed copy in B. Moving the boundary across hair, text and fine edges makes localized quality changes easier to spot.

This is a visual comparison, not a numerical pixel-difference measurement. Use Image diff heatmap when you need a difference image and a numeric average.

Matching composition and aspect ratio matters

Both images are fitted into the same viewer with object-fit: contain. If crop or aspect ratio differs, the same screen position may no longer represent the same source pixel.

The slider changes how much of B is visible

A fills the viewer underneath. B sits above it, and its visible width changes from 0 to 100 percent. The source files themselves are not blended or edited.

Filename and size are shown for both images

The metrics below the viewer make it easy to confirm which file is A or B and compare their file sizes at the same time.

There is no exported comparison graphic

The feature is an interactive browser viewer. It does not create a split-image download with the divider baked into the output.