Before & After Image
Compare two images with a draggable before/after slider, ratio presets, and local processing. Download a split PNG with the divider handle directly in your browser.
Before image
After image
A before & after image slider overlays two photos in one frame and reveals differences with a draggable vertical divider. Instead of switching tabs or placing images side by side, you can inspect details in the exact same area and move smoothly between states.
This tool runs fully in your browser. Your files are processed locally, not uploaded to a server.
How to Use the Before & After Slider
- Upload the Before image from the left panel.
- Upload the After image from the right panel.
- Optionally customize labels, pick a slider height, and choose a frame ratio preset.
- Click Compare Images to open the interactive viewer.
- Drag the divider handle left or right (or swipe on touch devices).
- Click Download PNG when you want a shareable comparison image.
Common Use Cases
| Use Case | Before | After |
|---|---|---|
| Photo retouching | Original image | Color-corrected or edited version |
| UI/UX redesign | Old screen | New interface |
| Product edits | Raw product shot | Cleaned or background-removed shot |
| Real estate staging | Empty room | Staged room |
| Landscaping | Initial area | Completed design |
| Map comparison | Historical view | Current view |
Slider Layout & Options
Slider height controls the vertical size of the comparison frame. You can choose 340 px, 420 px, 520 px, or 640 px.
Frame ratio lets you shape the viewport for common publishing formats:
Auto(free width inside the available layout)4:51:19:1616:9
Custom labels replace the default Before and After tags with your own context, such as v1 and v2, old and new, or dates.
Show labels toggles text overlays on or off for cleaner captures.
Download PNG exports a ready-to-share split image. Export includes:
- a centered
50/50split, - a visible vertical divider line,
- and the round handle style, so the result clearly looks like a before/after comparison.
How the Comparison Works
Both images are rendered in the same viewport using object-fit: cover, so each side fills the frame cleanly. The After layer is clipped dynamically while the Before layer stays underneath. As you drag, only the clipping boundary changes, which keeps interaction smooth and responsive.
For export, the tool draws both images to a canvas at high resolution, clips the right side, and paints the divider plus handle graphics on top before generating a PNG.
Tips for Best Results
- Use shots with similar framing for the most meaningful comparison.
- Choose a ratio that matches your destination platform before exporting.
- Use
1:1for square social posts,4:5for portrait feeds, and9:16for story-style layouts. - Keep labels short so they do not visually compete with subject details.
- If important content is near edges, test another ratio or height to improve crop balance.
Privacy & Security
Processing happens locally in your browser with modern web APIs. No image data is sent to external servers by this tool.
FAQ
What image formats are supported?
Any format that your browser can decode natively, typically JPEG, PNG, WebP, GIF, AVIF, and BMP.
Can I use portrait and landscape images together?
Yes. The tool aligns both images in a shared frame and fills the viewport with object-fit: cover. For best visual alignment, use similarly framed images when possible.
What does Download PNG export exactly?
It exports a static split comparison with a centered 50/50 divider, visible separator line, and handle marker, so the output is presentation-ready.
Are there fixed aspect ratio presets?
Yes. You can select 4:5, 1:1, 9:16, or 16:9, or leave it on Auto.
Are my images uploaded anywhere?
No. Files stay in your browser session and are not uploaded by this tool.
Does it work on mobile?
Yes. Dragging supports touch gestures, and action buttons are optimized for mobile width.