Imagen / Taller de fotografía
Deslizador de antes y después
Crea una comparación de antes y después con etiquetas editables y un deslizador en tiempo real. Descarga un archivo HTML portátil con ambas imágenes incluidas, una transición animada en GIF o un archivo WebM cuando sea compatible.
Deslizador de antes y después: Usa las proporciones de la imagen del antes y recorta la imagen del después desde el centro para ajustarla. La descarga HTML contiene ambas imágenes PNG como URI de datos y su propio deslizador de rango accesible mediante teclado. Las transiciones en GIF se ajustan a un máximo de 480 por 480 píxeles; las transiciones en WebM se graban durante unos dos segundos cuando el navegador permite la grabación. Funciona al 100 % en tu navegador, sin subir archivos a ningún servidor.
- Categoría
- Herramientas de imagen
- Se ejecuta
- En tu navegador
- Coste
- Gratis · sin registro
- Disponibilidad
- Lista para usar
Funciona por completo en tu navegador
Comparación en directo
Elige las dos imágenes para compararlas.
La grabación en WebM no está disponible en este navegador. Descarga la transición en GIF.
Comparación portátil
Ambas imágenes se normalizan a las mismas proporciones y se incrustan en el HTML como URI de datos PNG. Un control de rango nativo controla el área visible de la imagen posterior y admite las flechas del teclado. El archivo contiene JavaScript integrado, que las políticas de alojamiento restrictivas pueden bloquear.
Exportaciones animadas
La disponibilidad de WebM se comprueba antes de la grabación. GIF es la alternativa cuando WebM o la captura del lienzo no están disponibles. Comprobación de compatibilidad con MediaRecorder: https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/isTypeSupported_static
Cómo se usa
- Elige las fotos del antes y el después.
- Añade etiquetas y mueve el deslizador de comparación.
- Descarga un HTML para un deslizador interactivo, o un GIF o WebM compatible para una transición animada.
Privacidad y límites
Tus archivos y tus imágenes permanecen en tu navegador. No se sube nada.
Herramientas relacionadas
Preguntas frecuentes
¿El HTML funciona sin conexión?
Sí. Incluye ambas imágenes y el código del deslizador en un solo archivo, sin solicitudes externas.
¿Por qué WebM está desactivado?
El navegador debe admitir la grabación en WebM y la captura del lienzo. Cuando estas funciones no están disponibles, usa la transición en GIF.
¿En qué se diferencia del deslizador de comparación de imágenes?
Esta página exporta un deslizador HTML funcional y transiciones animadas. El deslizador de comparación de imágenes exporta un PNG estático, incluidos diseños en paralelo.
Herramienta gratuita · se ejecuta en tu navegador · sin cuenta