Image compare slider. Before and after, no upload.

How to use the Image Compare Slider

This tool puts two images in the same frame so you can compare them with a sliding divider, a crossfade or a side-by-side card. Both images are fitted into a frame as wide as the wider image and as tall as the taller one, and you can save the exact view as a PNG. It suits redesign reviews, photo edits, retouching and before and after posts.

Step by step

1. 1
   Load both images

   Drop your original on Drop the BEFORE image and the changed version on Drop the AFTER image, or click each box to browse. You can also drop two files on either box: the first becomes before and the second after. Each box then shows the file name and its pixel size.

2. 2
   Pick a view mode

   Under View mode, choose Slider, Crossfade or Side-by-side. For Slider and Side-by-side, also pick Vertical or Horizontal. Vertical splits left and right; Horizontal splits top and bottom.

3. 3
   Move the divider

   In Slider mode, drag anywhere on the image, drag the round handle, or use the Split position slider (0 to 100%, default 50%). With the handle focused, the arrow keys move it 1%, Shift with an arrow moves 10%, and Home or End jump to the edges.

4. 4
   Tune the other modes

   In Crossfade, set After opacity from 0 to 100% (default 50%) to blend the after image over the before. In Side-by-side, set Gap from 0 to 80 px (default 14 px) for the space between the two images.

5. 5
   Set labels and style

   Keep Show labels ticked to draw tags on the image, and type your own text in Before label and After label (up to 24 characters). Change Divider width (0 to 14 px, default 3 px), Divider color, and Letterbox fill for the empty space around a smaller image.

6. 6
   Export the comparison

   Choose whether to Include labels and Include divider line, then press Download view PNG for the current view or Side-by-side PNG for a two-panel card. Copy puts the current view on your clipboard. Swap exchanges the two images and their labels; Replace images scrolls back to the drop boxes.

Reading the result

• The line under the export buttons shows both source sizes and the export size, for example 1200×800 vs 1000×900 · export 1200 × 900 px. Exports are at full resolution, not the preview size.
• In Side-by-side, the export is two frames plus the gap. With the example above and the default 14 px gap, Vertical gives 2414 × 900 px.
• In Crossfade, the labels show the mix, such as Before 50% and After 50%, so the exported image records the blend you used.
• Files are named after the mode: compare-slider.png, compare-fade.png or compare-side.png from Download view PNG, and compare-side-by-side.png from Side-by-side PNG.

Tips and common mistakes

• Use two images of the same size, such as two screenshots at the same window width. A smaller image is scaled up to fit the frame, which can make it look soft.
• If the before and after look reversed, press Swap rather than loading the files again.
• Pick Transparent for Letterbox fill if the PNG will sit on a colored page; pick White or Black for a solid card.
• Side-by-side PNG follows the Vertical or Horizontal choice and never draws a divider line.
• Labels only appear in an export when both Show labels and Include labels are ticked.
• If Copy reports that the clipboard is blocked or not supported, use Download view PNG instead.

Privacy and limits

Both images are opened and drawn in your browser. Nothing is uploaded and nothing is saved, so reloading the page clears them. The preview is drawn at up to 1600 px on the long side to stay fast, while exports use the full source size.

Back to the tool

Everything a comparison should do.

• Drag a before/after slider across two images to reveal the difference at any position, mouse or arrow keys.
• Crossfade between images with an opacity slider to blend them at any ratio.
• View side by side in a vertical or horizontal layout, with an adjustable gap.
• Edit the “Before” and “After” labels and choose whether they appear in the export.
• Export a full-resolution PNG of the current view or a clean side-by-side card, or copy it straight to the clipboard.
• Letterbox mismatched sizes automatically so any two images can be compared fairly.

Frequently asked questions.

More image tools.

Browse the full free-tool library →