Comparador de imágenes antes/después
Arrastra dos imágenes y desliza la barra para verlas comparadas píxel a píxel: izquierda/derecha o arriba/abajo, centrado al 50% y con el código HTML listo para incrustar en tu propia web con las imágenes en base64 — sin subir tu material a ningún servidor.
Antes
Después
Sube dos imágenes para compararlas: todo se procesa en tu navegador.
Hecho por
Miguel Ángel Colorado Marin (MACM)
Hecho por
Miguel Ángel Colorado Marin (MACM)
Full-Stack Developer · Guadalajara, España
Desarrollo aplicaciones web, herramientas digitales y proyectos completos — desde el diseño hasta el despliegue.
El comparador antes/después es la herramienta de venta más directa que existe: se ve el antes borroso y el después nítido, y la conversión es inmediata. Esta versión lo resuelve sin trampas: subes las dos imágenes, ajustas la orientación (horizontal o vertical) y deslizas la barra con ratón o dedo, con control fino por teclado y centrado al 50%. Lo distinto: genera el código HTML/CSS completo con tus imágenes incrustadas en base64 — cópialo o descárgalo y pégalo en tu web, producto, correos o documentación. Cada clic se procesa en tu navegador: las imágenes no se suben a ningún servidor, ni siquiera para generar el snippet. También sirve para comparar ediciones, compresiones, antes/después de tratamientos o versiones de diseño.
Características
- ✓Slider antes/después con arrastre de ratón y táctil
- ✓Orientación conmutable: izquierda/derecha o arriba/abajo
- ✓Centrado al 50% con un clic y control fino con flechas del teclado
- ✓Snippet HTML/CSS con tus imágenes incrustadas en base64, copiable y descargable
- ✓100% local: tus fotos nunca salen de tu navegador, ni siquiera al generar el código
¿Cómo comparar dos imágenes con un slider?
- 1
Sube las dos imágenes
El slot «Antes» toma la versión original y «Después» la modificada; puedes reemplazarlas sin recargar.
- 2
Elige la orientación
Izquierda/derecha para fotos de producto, arriba/abajo para comparaciones verticales de antes y después.
- 3
Desliza y compara
Arrastra la barra con ratón o dedo; usa las flechas del teclado para ajuste fino y centra al 50% con un clic.
- 4
Exporta el código
Abre el panel de código y copia o descarga el HTML con tus imágenes incrustadas: listo para tu web.
Preguntas frecuentes
¿Qué pasa con mis imágenes al usar el generador de código?
Se quedan en tu navegador: el snippet usa data URLs (base64) construidas localmente por FileReader, así que el HTML generado funciona en cualquier sitio sin depender de archivos externos ni de este servidor. La única contrapartida honesta: para imágenes muy grandes el código queda grande — para webs, comprime primero con el Compressor de esta suite.
¿Sirve para móvil?
Sí: el arrastre táctil funciona igual que el ratón y el diseño es responsive. El snippet generado también es responsive (aspect-ratio y object-fit), así que el comparador que pegas en tu web se adapta al ancho del contenedor.
¿Puedo usar el snippet con imágenes grandes de la web?
Sí: si prefieres URL externas en vez de base64, sustituye los src del snippet por las URLs de tus imágenes — el CSS funciona igual. Para máxima privacidad y portabilidad, la versión base64 es autocontenida.
Herramientas relacionadas
Incrusta Comparar Imágenes (Slider) en tu web
Integra Comparar Imágenes (Slider) en cualquier página web con un simple iframe. Gratis, con atribución a miguelacm.es.
<iframe
src="https://miguelacm.es/embed/image-compare"
width="100%"
height="700"
frameborder="0"
title="Comparar Imágenes (Slider) — miguelacm.es"
></iframe>