Before & After
Comparison Slider
Compare two images with an interactive slider in real time.
Export the comparison as a PNG — perfect for sharing results.
📷 Before Image
✨ After Image
About
The Before & After Comparison Slider lets you compare two images with an interactive drag slider. Ideal for retouching, construction, fitness, and more, it runs entirely in your browser using the Canvas API.
Drag the slider to any position and download the comparison as a PNG — perfect for sharing results. No image data is ever sent to any server.
How to Use
Upload Images
Upload your Before and After images by clicking or dropping.
Drag Slider
Drag the slider in the comparison area to adjust the split position.
Export
Click "Download PNG" to save the comparison at the current slider position.
Glossary
- Before & After
- A visual presentation comparing the state before and after a treatment, construction, or edit. Uses two images — one for each state.
- Slider Comparison
- An interactive UI where dragging a single slider left/right reveals the before or after image within the same frame.
- Canvas API
- HTML5's 2D drawing API. Used to render both images on a canvas and clip them at the slider position to implement the comparison UI.
- Pointer Events API
- A Web API that handles mouse, touch, and pen input uniformly. Used to implement cross-device slider drag behavior.
- Clipping
- Restricting the drawing area to a specific shape. In before/after sliders, the canvas is split at the slider position with each image on one side.
- Aspect Ratio
- The ratio of width to height of an image. Both images should have the same aspect ratio for the comparison to work correctly.
- PNG (Portable Network Graphics)
- A lossless image format with no quality degradation when saved. Supports transparency. Used as the export format.
- WebP
- A modern image format by Google offering smaller file sizes than JPEG and PNG with comparable quality. Supported as an input format.
FAQ
- Q.What if the two images are different sizes?
- Both images are automatically resized to the same dimensions for comparison (maintaining aspect ratio).
- Q.Can I export a PNG at the current slider position?
- Yes. Press "Download PNG" to save the image exactly as it appears in the comparison.
- Q.Can I hide the BEFORE/AFTER labels?
- Yes. Uncheck the "Show Labels" option to hide them.
- Q.Does it support portrait/landscape images?
- Yes. Both orientations are supported, and you can switch between horizontal and vertical comparison directions.
- Q.Are images sent to any server?
- No. All processing uses the Canvas API locally in your browser. No image data is sent externally.
- Q.What image formats are supported?
- JPEG, PNG, WebP, GIF (static), and any other formats supported by your browser.
- Q.Does the slider work on smartphones?
- Yes. It fully supports touch input — just drag your finger left or right on the comparison area.
- Q.Can I compare multiple image pairs at once?
- Currently one pair at a time. Export each comparison as a PNG, then load new images for the next comparison.
Use Cases
Photo Retouching
Compare before and after Photoshop edits and share with clients.
Construction & Renovation
Show the difference before and after a renovation project.
Fitness & Beauty
Visually compare the results of a diet or cosmetic procedure.
Gardening & DIY
Record and share garden or home improvement transformations.