Before / after slider
Compare two images with a draggable divider.
This runs in your browser. Nothing is uploaded.
About Before / after slider
Overlays two images and reveals the second one behind a divider you drag across the frame, then exports the split composite as a PNG, all handled in your browser.
Showing that an edit worked is harder than making it. Two images side by side force the viewer to look back and forth and remember what they saw; a wipe between them in the same frame makes the difference land immediately. Retouchers, developers comparing a compression setting, and anyone documenting a restoration all end up wanting the same wipe.
Load your before image, then use Add second image for the after. A transparent canvas sits over the preview: press anywhere on it and drag sideways, and the divider follows your pointer, revealing the second image everywhere to the right of the line. There is a Divider % slider underneath that does the same thing with the keyboard, and a Download button that writes out the current split as a flat PNG.
The second image is drawn to the first image's dimensions, so comparing a 4000-pixel original against a 1000-pixel export works fine, but two different aspect ratios mean the after is stretched to match the before. Crop them to the same shape first. The export is also a static illustration with the divider line baked in, not an interactive widget you can put on a page.
How to use Before / after slider
- 1Drop the before image onto the panel.
- 2Click Add second image and pick the after version.
- 3Drag the divider across the image, or move the Divider % slider.
- 4Click Download to save the composite at the split you have set.
What it won't do
- The second image is stretched to the first one's dimensions.
- Exports a static PNG, not an interactive comparison.
- Vertical divider only; there is no horizontal wipe or fade.
Common questions
How do I compare two images before and after an edit?
Stack them in the same frame and wipe between them, which is what this does: the before image sits underneath, the after is revealed to the right of a divider you drag. That keeps both versions in the same position on screen, so small changes in tone or sharpness are obvious instead of needing to be remembered.
Does the downloaded image include the divider line?
Yes. The exported PNG contains the before image, the after image to the right of wherever you left the divider, and the vertical divider line drawn in at that position. The circular drag handle you see on screen is left out of the file, since it is an interface element rather than part of the comparison.
What happens if the two images are different sizes?
The second image is scaled to the first one's pixel dimensions. Different resolutions at the same aspect ratio compare correctly, which is the common case when checking an export against its source. Different aspect ratios will visibly distort the after image, so crop or resize them to match before loading.
Can I embed this slider on my own website?
Not from here. The output is a flat PNG of one chosen split, which is the right thing for a document, a chat message or a case-study image. An interactive slider on a live page needs a component in your own site's code, and there are several small libraries that do it.
Related tools
Why this one doesn't upload your file
There is no server to upload to. This page is a static file, and the work happens in your browser using the same graphics and WebAssembly code that renders every other site you visit. Your file is read from disk into memory, processed, and handed back as a download. Once the page has loaded you can disconnect from the network entirely and it keeps working. The longer explanation