Image Comparison Slider
Compare two images with a draggable before/after slider, then download the split image or copy an embed snippet.
Drag & drop the “before” image, or click to browse
No uploads. Your files stay on your device.
Drag & drop the “after” image, or click to browse
Both images are compared locally in your browser.
Drop a before and an after image to build the slider.
How it works
Drop two images — a “before” and an “after” — and drag the divider (or use the range slider,
which works with the arrow keys) to wipe between them. Both images are decoded with
FileReader and composited with the Canvas API inside your own browser, so nothing
is ever uploaded: you can safely compare client retouches, screenshots, medical scans or
compression tests.
If the two images have different dimensions, the “after” image is scaled and centre-cropped to match the “before” image so the split lines up pixel for pixel. Download comparison PNG saves exactly what you see (divider and labels included, minus the drag handle), and Copy embed code gives you a small self-contained HTML/CSS snippet for a live before/after slider on your own site — just swap in your two image URLs.
Frequently asked questions
How do I compare two images side by side online?
Drop your "before" image in the first box and your "after" image in the second. A split preview appears instantly: drag the divider across the image, or use the range slider and the arrow keys, to wipe between the two versions. Switch the split direction to horizontal if you would rather compare top against bottom.
Do both images need to be the same size?
No. The comparison uses the "before" image's dimensions, and the "after" image is scaled up or down and centre-cropped to match so the split lines up pixel for pixel. Identical dimensions still give the cleanest result, so use the same crop when you can. The tool tells you when it had to rescale.
Are my images uploaded to a server?
Never. Both files are decoded and composited with the Canvas API inside your own browser, so nothing leaves your device, unlike hosted before/after slider sites, which store your images on their servers. That makes it safe for client retouches, unreleased designs, screenshots and medical or legal scans.