Sin subida, 100% local, sin cuenta

Comparación de imágenes

Carga dos imágenes y compáralas con un deslizador de arrastre o vista lado a lado. Perfecto para ediciones antes/después. Sin subida.

Cómo funciona Deslizador de comparación de imágenes

El comparador de imágenes te permite cargar dos imágenes una al lado de la otra y arrastrar un divisor vertical para revelar más de una imagen y menos de la otra. Este diseño de antes y después es una forma directa y ágil de mostrar la diferencia entre dos versiones de una imagen. Ambas imágenes se cargan desde tu disco local usando la API File y se renderizan en pantalla por el navegador; nada se sube a un servidor.

El control deslizante usa un enfoque de clip-path de CSS para que la transición entre las dos imágenes siempre esté alineada con los píxeles y no haya mezcla ni interpolación en el límite. También puedes cambiar a una vista de pantalla dividida que muestra las dos imágenes en paneles fijos izquierdo y derecho. La herramienta es útil para comparar ediciones de fotos, resultados de compresión, iteraciones de diseño o cualquier par de imágenes donde necesites ver las diferencias con claridad.

Cómo usar Deslizador de comparación de imágenes, paso a paso

  1. Arrastra la primera imagen (la versión «antes») al área de carga izquierda.
  2. Arrastra la segunda imagen (la versión «después») al área de carga derecha.
  3. Arrastra el divisor hacia la izquierda y la derecha para revelar más de una imagen a la vez.
  4. Cambia a la vista dividida para ver ambas imágenes en paneles fijos si prefieres una comparación estática.
  5. Usa el botón de pantalla completa para maximizar la comparación para una inspección detallada.

Casos de uso comunes

  • Un fotógrafo compara la exportación RAW original con una versión retocada para evaluar cuánto cambió la edición la imagen.
  • Un desarrollador comprueba un par de imágenes comprimidas para evaluar si la pérdida de calidad a un nivel de compresión dado es aceptable.
  • Un diseñador UX presenta un rediseño de interfaz colocando la captura de pantalla antigua a la izquierda y la nueva a la derecha para una revisión con las partes interesadas.
  • Un editor de contenidos verifica que una manipulación de imagen (gradación de color, recorte) sea coherente entre una miniatura y una versión de tamaño completo.

Preguntas frecuentes

¿Las dos imágenes deben tener el mismo tamaño?

La herramienta funciona mejor cuando ambas imágenes tienen las mismas dimensiones, porque el control deslizante las superpone exactamente. Si las imágenes difieren en tamaño, la herramienta las escala a un tamaño de visualización común. Puede aparecer cierto desalineamiento en los bordes si las proporciones de aspecto son diferentes.

¿Se envían las imágenes a algún lugar para que funcione la comparación?

No. Ambas imágenes se cargan desde tu sistema de archivos a través de la API File y se dibujan en elementos Canvas en tu navegador. La comparación es una operación de renderizado del lado del cliente. Ninguna imagen sale de tu dispositivo.

¿Puedo comparar imágenes de dos URLs diferentes en lugar de archivos locales?

La herramienta actual acepta solo archivos locales. Cargar imágenes desde URLs remotas requeriría que el navegador las obtuviera y estaría sujeto a restricciones CORS que muchos hosts de imágenes no permiten.

¿Hay un tamaño máximo de imagen que la comparación pueda manejar?

El límite es la memoria Canvas de tu navegador. Las imágenes de hasta unos 20 megapíxeles cada una se manejan sin problemas en la mayoría de los dispositivos de escritorio. Las imágenes muy grandes pueden ralentizar la renderización o provocar un error de memoria en hardware de gama baja.

¿Puedo guardar una captura de pantalla de una posición específica del control deslizante?

La herramienta de captura de pantalla de tu sistema operativo (o la función de captura del navegador en DevTools) es la forma directa de capturar una posición particular del control deslizante. La propia vista de comparación no tiene un botón de exportación integrado para una imagen fusionada.