Control deslizante para comparar imágenes

Cómo funciona el control deslizante de comparación de imágenes

Qué hace la herramienta

El control deslizante de comparación de imágenes superpone dos imágenes y muestra solo la parte que quieres ver al arrastrar un control vertical. A medida que lo deslizas hacia la izquierda y la derecha, se revela más de la imagen de 'antes' o 'después', haciendo que las diferencias visuales lado a lado sean inmediatamente evidentes. También se muestran los tamaños de archivo y el cambio porcentual para que puedas ver el impacto a nivel de bytes.

Casos de uso comunes para desarrolladores

Los ingenieros que verifican la compresión de imágenes con pérdida comparan una versión JPEG vs. WebP de la misma fuente. Los diseñadores revisan cambios de mapeo de tonos, retoque o corrección de color entre un borrador y la versión final. Los ingenieros de ML/IA visualizan resultados de superresolución, reducción de ruido o transferencia de estilo frente a sus entradas. Los equipos de marketing crean demostraciones impactantes de antes/después para páginas de destino.

Formatos, tipos o variantes de datos

Acepta cualquier formato de imagen que el navegador pueda renderizar — PNG, JPEG, WebP, AVIF, GIF, SVG. Las imágenes se mantienen en tu navegador mediante object URLs (URL.createObjectURL), así que no se sube nada. Para una comparación más útil, las dos imágenes deben tener dimensiones y relación de aspecto coincidentes; si difieren, ambas se renderizan con object-fit: contain para que ninguna se recorte.

Errores comunes y casos límite

Comparar imágenes con relaciones de aspecto diferentes produce barras tipo letterbox en un lado. Las imágenes muy grandes (>50 MB) pueden ralentizar la interacción de arrastre en navegadores antiguos. El deslizador muestra la imagen completa del 'after' — si ambos archivos tienen transparencia, coloca el deslizador sobre un área opaca o verás el fondo de la página filtrándose a través de ambos paneles.

Cuándo usar esta herramienta vs código

Usa la herramienta del navegador para comparaciones ad-hoc durante el desarrollo o para demos rápidas a stakeholders. En sitios web en producción, integra librerías dedicadas como react-compare-slider o img-comparison-slider para accesibilidad, carga diferida y soporte de SSR; para verificaciones de calidad automatizadas por lotes en cientos de imágenes, usa herramientas basadas en SSIM/PSNR como ImageMagick `compare` o pixelmatch.