Image Compare Slider (Before & After)
Load a before and an after image, then drag the divider or use the arrow keys to see exactly what changed. Switch between a horizontal and vertical split, show "Before" and "After" labels, and save a side-by-side PNG. To adjust photo colors first, try the Image Filter & Color Adjustment tool.
🔒 Runs in your browser · Your data is never sent to a server
You can also drag and drop an image file here
You can also drag and drop an image file here
Load both images to start comparing.
Comparison preview
Drag on the preview, or focus the slider and use the arrow keys, to move the divider.
How to use
- Load two images with "Choose the before image" and "Choose the after image" (drag & drop also works).
- Drag on the preview, or move "Divider position" with the arrow keys, to compare.
- Switch "Split direction" and "Show labels" as needed.
- Save with "Save comparison as PNG" or "Save side-by-side as PNG".
Notes
- If the after image has a different aspect ratio, it is fitted inside the before image with empty margins.
- Saved PNGs are limited to 4,096px on the longest edge per image. Larger images are scaled down.
- "Save side-by-side as PNG" places the before and after images next to each other, horizontally or vertically depending on the split direction.
- Animated GIFs use only their first frame. Exporting an animated GIF is not supported.
Glossary
Before / after
A way of showing an edit by placing the original next to the result. The slider shows the original on one side of the divider and the edited version on the other.
Side-by-side image
One image made by placing two images next to each other. It shows the difference even where an interactive slider cannot be embedded, such as social posts or documents.
FAQ
Can I compare images of different sizes?
Yes. The after image is fitted inside the before image, keeping its aspect ratio. If the ratios differ you will see empty margins, so matching sizes gives the most accurate comparison.
Can I move the slider with the keyboard?
Yes. Focus the "Divider position" slider and use the left and right arrow keys. You can also drag on the preview with a mouse or finger.
What is the difference between the comparison and side-by-side PNGs?
The comparison PNG is a single image split at the current divider position, with the divider line drawn in. The side-by-side PNG places the complete before and after images next to each other and does not depend on the divider.
Can I export an animated GIF?
No. Output is PNG only. If you load an animated GIF as input, only its first frame is used.
Share this page