Before & After Image Comparison Slider
Upload two images and drag the slider to compare them side by side — then download the comparison as a PNG.
What is it?
A before-and-after image comparison slider is a tool that overlays two images in the same frame and lets you drag a divider to reveal more of one image or the other. It is one of the most powerful visual storytelling techniques in photography, design, product demos and content marketing, because it makes differences instantly visible without requiring the viewer to mentally compare two separate images. This tool provides an interactive slider comparison directly in your browser. You upload two images — any combination of PNG, JPG or WEBP — label them as you like (Before/After, Original/Edited, Old/New) and drag the divider to compare them. The tool supports both horizontal (left/right) and vertical (top/bottom) slider orientations. The download function exports a side-by-side static PNG that shows both images next to each other with a clear divider and your custom labels — ready for use in articles, social media posts, presentations or documentation. No watermarks are added. All processing happens locally in your browser.
How to use it
- Click the "Before" panel and upload your first image (or drag and drop it).
- Click the "After" panel and upload your second image (or drag and drop it).
- Optionally edit the "Before" and "After" labels to match your content (e.g. "Original" / "Retouched").
- Drag the slider handle left and right to compare the two images interactively.
- Toggle between Horizontal and Vertical orientation using the buttons.
- Click "Download Side-by-Side PNG" to export a static comparison image.
Why use this tool
The before-and-after comparison format is a proven way to communicate change, quality, improvement or difference. Photographers use it to showcase retouching work. Dermatologists and cosmetic brands use it to show treatment results. Web designers use it to compare old and new layouts. Data scientists use it to compare model outputs. Urban planners use it to overlay historical and modern maps. The interactive slider format is more engaging than two static images placed next to each other because the viewer controls the reveal — they can focus on exactly the area they find most interesting. Studies on interactive content consistently show higher engagement and longer session times compared to static alternatives. The exported PNG is optimised for sharing: it includes both images side by side with your custom labels burned in, making it self-explanatory in any context. The image can be used in blog posts, Notion documents, presentations, social media or as documentation for design reviews. All image data is processed locally. Nothing is uploaded to a server.
Frequently asked questions
Do the two images need to be the same size?
No. The tool accepts images of any size and displays them with object-fit: contain inside a 16:9 container. For the most accurate visual comparison, images that are the same resolution and composition (e.g. same scene, same crop) work best.
What image formats are supported?
PNG, JPG and WEBP are all supported. Any image your browser can display via an <img> tag will work.
What does the downloaded PNG look like?
The downloaded PNG places both images side by side with a 4-pixel divider between them, and your labels are shown at the bottom. The canvas height matches the tallest image; both images are drawn at their natural resolution.
Can I add a watermark or logo?
The downloaded PNG does not include a watermark. The labels you set (e.g. "Before" and "After") are the only text added to the image.
Is this tool mobile-friendly?
Yes. The slider responds to both mouse drag and touch events, so it works on smartphones and tablets.