Comparador
Antes y Después
Compara dos imágenes con un slider interactivo en tiempo real.
Exporta la comparación como PNG para compartir resultados.
📷 Imagen Antes
✨ Imagen Después
Acerca de
El Comparador Antes y Después te permite comparar dos imágenes con un slider interactivo de arrastre. Ideal para retoques, construcción, fitness y más, se ejecuta completamente en tu navegador usando la Canvas API.
Arrastra el slider a cualquier posición y descarga la comparación como PNG. No se envían datos de imágenes a ningún servidor.
Cómo usar
Sube imágenes
Sube tus imágenes Antes y Después haciendo clic o arrastrando.
Arrastra el slider
Arrastra el slider en el área de comparación para ajustar la posición.
Exporta
Haz clic en "Descargar PNG" para guardar la comparación.
Glosario
- Antes y Después
- Presentación visual que compara el estado antes y después de un tratamiento, construcción o edición. Utiliza dos imágenes, una para cada estado.
- Comparador Slider
- IU interactiva donde arrastrar un slider izquierda/derecha revela la imagen de antes o después dentro del mismo marco.
- Canvas API
- API de dibujo 2D de HTML5. Se usa para renderizar ambas imágenes en un canvas y recortarlas en la posición del slider para implementar la UI de comparación.
- Pointer Events API
- API Web que maneja uniformemente la entrada de ratón, toque y lápiz. Se usa para implementar el comportamiento de arrastre del slider en cualquier dispositivo.
- Recorte (Clipping)
- Restringir el área de dibujo a una forma específica. En los sliders antes/después, el canvas se divide en la posición del slider con cada imagen a un lado.
- Relación de Aspecto
- La relación entre el ancho y la altura de una imagen. Ambas imágenes deben tener la misma relación de aspecto para que la comparación funcione correctamente.
- PNG
- Formato de imagen sin pérdida. No hay degradación de calidad al guardar. Compatible con transparencia. Utilizado como formato de exportación.
- WebP
- Formato de imagen moderno de Google que ofrece tamaños de archivo más pequeños que JPEG y PNG con calidad comparable.
Preguntas frecuentes
- Q.¿Qué pasa si las imágenes tienen diferente tamaño?
- Se redimensionan automáticamente al mismo tamaño para la comparación, manteniendo la relación de aspecto.
- Q.¿Puedo exportar PNG en la posición actual del slider?
- Sí. Presiona "Descargar PNG" para guardar la imagen exactamente como aparece en la comparación.
- Q.¿Puedo ocultar las etiquetas ANTES/DESPUÉS?
- Sí. Desmarca la opción "Mostrar etiquetas" para ocultarlas.
- Q.¿Funciona con imágenes verticales/horizontales?
- Sí. Ambas orientaciones son compatibles, y puedes cambiar entre direcciones de comparación horizontal y vertical.
- Q.¿Las imágenes se envían a algún servidor?
- No. Todo el procesamiento usa la Canvas API localmente en tu navegador. No se envían datos de imágenes externamente.
- Q.¿Qué formatos de imagen son compatibles?
- JPEG, PNG, WebP, GIF (estático) y cualquier formato compatible con tu navegador.
- Q.¿El slider funciona en smartphones?
- Sí. Es totalmente compatible con entrada táctil — arrastra el dedo hacia la izquierda o derecha.
- Q.¿Puedo comparar varios pares de imágenes a la vez?
- Actualmente un par a la vez. Exporta cada comparación como PNG, luego carga nuevas imágenes.
Casos de uso
Retoque Fotográfico
Compara retoques de Photoshop antes y después y presenta a clientes.
Construcción y Renovación
Muestra la diferencia antes y después de un proyecto de renovación.
Fitness y Belleza
Compara visualmente los resultados de una dieta o tratamiento cosmético.
Jardinería y DIY
Registra y comparte transformaciones de jardín o decoración del hogar.