Before/After Image Comparer
Drop two images and slide the bar to compare them side by side: left/right or top/bottom, 50% center, plus ready-to-embed HTML code with the images in base64 — without uploading your material to any server.
Before
After
Upload two images to compare: everything runs in your browser.
Built by
Miguel Ángel Colorado Marin (MACM)
Built by
Miguel Ángel Colorado Marin (MACM)
Full-Stack Developer · Guadalajara, España
I develop web apps, digital tools and full projects — from design to deployment.
The before/after comparison sells on sight: blurred before, sharp after, conversion instant. This version runs entirely in your browser: upload both images, pick the orientation (horizontal or vertical), and drag the slider with mouse or touch, with fine keyboard control and one-click 50% centering. The twist: it generates the complete HTML/CSS code with your images embedded as base64 — copy or download it and paste it into your site, product page, emails or listings, without your material ever reaching a server.
Features
- ✓Before/after slider with mouse and touch dragging
- ✓Switchable orientation: left/right or top/bottom
- ✓50% center with one click and fine keyboard control
- ✓HTML/CSS snippet with your images embedded in base64, copyable and downloadable
- ✓100% local: your photos never leave your browser, not even when generating the code
How to compare two images with a slider?
- 1
Upload both images
The «Before» slot takes the original and «After» the modified one; you can replace them without reloading.
- 2
Pick the orientation
Left/right for product shots, top/bottom for vertical before/after comparisons.
- 3
Slide and compare
Drag the bar with mouse or touch; use keyboard arrows for fine control and center at 50% with a click.
- 4
Export the code
Open the code panel and copy or download the HTML with your images embedded: ready for your site.
Frequently asked questions
What happens to my images when the code is generated?
They stay in your browser: the snippet uses data URLs (base64) built locally by FileReader. The only honest trade-off: very large images make the code large — compress them first with the suite's image compressor.
Does it work on mobile?
Yes: mouse and touch dragging both work, and the layout is responsive. The generated snippet is responsive too (aspect-ratio and object-fit), so the compare adapts to its container width.
Can the snippet reference web images instead?
Yes: replace the snippet's src attributes with your image URLs instead of base64 — the CSS works the same. Base64 keeps it self-contained.
Related tools
Embed Image Comparison Slider on your site
Add Image Comparison Slider to any web page with a simple iframe. Free, with attribution to miguelacm.es.
<iframe
src="https://miguelacm.es/embed/image-compare"
width="100%"
height="700"
frameborder="0"
title="Image Comparison Slider — miguelacm.es"
></iframe>