About this tool
What does Before and After Slider do?
Before and After Slider places two images in the same frame and reveals them with a draggable comparison handle. It is useful for retouching portfolios, restoration demonstrations, renovations, fitness progress and product changes. The tool can export a standalone HTML widget with both images embedded.
Mouse, touch and keyboard slider
Image alignment and fit controls
Custom labels and divider style
Self-contained HTML widget export
Step-by-step guide
How to use Before and After Slider
- Upload the before image and the after image.
- Choose fit mode and label text.
- Drag the divider to verify alignment.
- Download the standalone comparison HTML widget.
Understand the result
How to read and refine the output
The comparison is most meaningful when both images show the same composition and dimensions. Cover mode fills the frame but may crop edges; contain mode preserves the complete images and may add empty space.
Practical advice
Tips for better results
- Use matching camera angles and crops.
- Align important features before export.
- Write clear, neutral labels.
- Test the widget on mobile before publishing.
Best-fit tasks
When to use Before and After Slider
- Comparing edits, restorations or redesigns
- Showing compression or retouching differences
- Preparing a side-by-side visual comparison
Choose carefully
When another method may be better
A slider can be misleading when the two images use different crops, dimensions or alignment. Normalize the pair before judging the edit.
Practical example
Example workflow
Resize both versions to identical dimensions and align the subject before loading them, so the slider reveals the edit rather than a framing difference.
Important limitations
What this tool cannot guarantee
The exported widget contains embedded image data and can become large. It is an interactive HTML component rather than a single static image, and host-site CSS may require isolation.
Common questions
Before and After Slider FAQs
Can I use the widget on my website?
Yes. Download the HTML and copy the component into a page you control.
Does it work on touchscreens?
Yes. The divider supports pointer and touch interaction.
Why do the images not line up?
They may have different crops or camera positions. Prepare matching images first.
Can I export a video?
This tool exports an interactive HTML comparison, not video.
Continue editing