Before & After Image Slider

Upload Your Images

About This Before & After Slider

This before-and-after image slider is a free comparison tool that overlays two images and lets you drag a divider to reveal differences. It runs entirely in your browser — your images are never uploaded to any server.

The tool supports horizontal (left/right) and vertical (top/bottom) comparison modes. You can drag the slider handle directly, use the quick-access buttons to jump to 0%, 50%, or 100%, or use the range slider for precise control. A swap button lets you reverse the before and after positions without re-uploading.

For the sharpest comparison, use two images with identical pixel dimensions. If the images differ in size, the overlay image is scaled to match the base image, which can introduce slight distortion.

How to Compare Two Images

1. Upload the "Before" image — click or drag a file into the left upload box. This image appears on the left side of the slider (or top in vertical mode).
2. Upload the "After" image — click or drag a file into the right upload box. This image appears on the right side (or bottom).
3. Drag the slider — move the center divider left or right to reveal more of either image. The position updates in real time.
4. Switch orientation — click Horizontal or Vertical below the comparison to change the split direction.
5. Use quick buttons — "Show Before" sets the slider to 100%, "Show After" sets it to 0%, and "50/50" centers it.

Tip: For best results, use images with the same dimensions. The tool scales images to fit, but matching dimensions produce the cleanest comparison.

Common Use Cases

• Photo retouching — compare the original and edited versions of a photo to check color grading, skin retouching, or exposure adjustments.
• Home renovation — show a room before and after remodeling to document progress or present results to clients.
• Fitness progress — place two photos from different dates side by side to track body composition changes over time.
• Design iteration — compare two versions of a UI mockup, logo, or layout to spot differences quickly.
• Satellite and aerial imagery — reveal environmental changes, construction progress, or disaster damage between two capture dates.
• Medical and scientific imaging — compare scans, micrographs, or lab images taken at different times or under different conditions.

Worked Example: Photo Editing Review

Suppose you edited a landscape photo to boost saturation and correct the horizon line. Here is how to review the edit:

1. Upload the original unedited photo as the "Before" image.
2. Upload the edited version as the "After" image.
3. Drag the slider slowly across the sky to check whether the saturation increase looks natural at the horizon boundary.
4. Switch to vertical mode and drag the slider down from the sky into the foreground to check color consistency across the entire frame.
5. Click "Swap Images" to put the edited version on the left — some people spot differences more easily when the edited image is on the leading side.

This process works the same for portrait retouching, product photography, or any image where you want to verify that edits improved the photo without introducing artifacts.

Privacy and Limitations

Your images are processed entirely in your browser using the JavaScript FileReader API. No image data is sent to any server. Refreshing the page clears everything.

Limitations:

• Very large images (above ~50 MP) may cause slow rendering on low-memory devices.
• The tool does not export the comparison as a single image. Use your OS screenshot tool to capture it.
• If the two images have different aspect ratios, the overlay is stretched to match the base, which can look distorted.
• Animated GIFs display only the first frame.

Before & After Image Slider FAQ

Related Image Tools