Un control deslizante de antes y después permite al espectador arrastrar un tirador para revelar la diferencia entre dos imágenes. Es útil para el retoque fotográfico, los cambios de diseño, la restauración, las pruebas de compresión y el avance de obras, pero solo cuando las dos imágenes son de verdad comparables.
Prepara imágenes equivalentes
- Mismas dimensiones. Las imágenes deben tener el mismo ancho y alto, o al menos la misma relación de aspecto, para que los detalles coincidan al mover el tirador.
- Mismo encuadre. En las fotos, dispara desde la misma posición con el mismo zoom. En las capturas de pantalla, usa el mismo tamaño de ventana.
- Mismo recorte y orientación. Comprueba que ninguna imagen esté reflejada ni girada.
Si los tamaños difieren, redimensiona una para igualarlas antes de comparar.
Elige el contenido adecuado
Escoge un sujeto donde la diferencia sea visible. Un cambio sutil de compresión es más fácil de juzgar si te acercas a una zona con textura y bordes, como pelo, texto o follaje, que en un cielo liso.
Sé honesto
- No cambies la iluminación, el contraste ni el color entre las tomas para luego atribuir todo el cambio a tu trabajo.
- Usa los mismos ajustes de exposición en las comparaciones de fotos.
- Muestra originales sin editar, no una selección muy recortada.
- En las comparaciones de compresión, indica los tamaños de archivo de ambas versiones, ya que una versión que se ve igual con la mitad de tamaño es la verdadera noticia.
Decisiones de diseño
- Un control horizontal encaja con imágenes apaisadas, y uno vertical con imágenes altas.
- Etiqueta los lados con claridad, por ejemplo "Antes" y "Después", para que el espectador no tenga que adivinar.
- Empieza con el tirador en el centro y asegúrate de que el control sea lo bastante grande para un pulgar en el móvil.
Accesibilidad
Proporciona una descripción en texto de lo que cambió, ya que un control deslizante es difícil de usar con el teclado o un lector de pantalla. Cuando sea posible, ofrece las dos imágenes una junto a la otra como alternativa.
Rendimiento
Las imágenes grandes ralentizan una página. Comprime ambos archivos y mantén las dimensiones no mayores de lo que necesita la visualización.
Preguntas frecuentes
¿La herramienta sube mis imágenes? No, la comparación se ejecuta en tu navegador.
¿Qué formatos puedo usar? Formatos de imagen comunes como JPG, PNG y WebP.