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 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 con pérdida de imágenes comparan una versión JPEG frente a una 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, eliminació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 de datos, tipos o variantes

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), por lo que no se sube nada. Para una comparación más útil, las dos imágenes deberían 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 de 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 'after' completa — 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 bibliotecas dedicadas como react-compare-slider o img-comparison-slider para accesibilidad, carga diferida y compatibilidad con SSR; para comprobaciones de calidad automatizadas por lotes en cientos de imágenes, usa herramientas basadas en SSIM/PSNR como ImageMagick `compare` o pixelmatch.