¿Qué es una diferencia de imágenes?

Una diferencia de imágenes compara dos versiones de una imagen píxel por píxel y marca todos los lugares en los que difieren. Los desarrolladores la utilizan para realizar pruebas de regresión visual: se compara una captura de pantalla de una página tomada antes de un cambio en el código con otra tomada después, de modo que un desplazamiento no deseado, un icono que falta o un color modificado destaquen incluso cuando las dos capturas parecen iguales a simple vista.

Descripción de la herramienta

Esta herramienta compara dos imágenes y genera una imagen de diferencias: muestra las diferencias en rojo sobre una copia atenuada de la primera imagen. Cuenta los píxeles que difieren, agrupa las diferencias cercanas en regiones y mide el área que cubren. Los bordes suavizados del texto y las formas se detectan como antialiasing y se excluyen del recuento, por lo que una captura tomada con un motor de renderizado de fuentes ligeramente diferente no aparece como un cambio. También puedes arrastrar un control deslizante por las dos imágenes y aplicar zoom a ambas al mismo tiempo.

Funciones

  • Compara imágenes PNG, JPEG, WebP, GIF, BMP y AVIF
  • Cuenta los píxeles diferentes y muestra su proporción con respecto a la imagen
  • Agrupa las diferencias cercanas en regiones y puede delinear cada región en la imagen de diferencias
  • Omite los píxeles con antialiasing y los marca con un color independiente, o los cuenta si lo prefieres
  • Umbral ajustable para determinar qué distancia debe haber entre dos colores para considerarlos diferentes
  • Segundo color opcional para los píxeles que se volvieron más oscuros, con el fin de distinguir el contenido añadido del contenido eliminado
  • Modo de solo diferencias, que dibuja las diferencias sobre un fondo transparente
  • Zoom de hasta el 3200 % con píxeles nítidos y descarga de la imagen de diferencias como imagen PNG
  • Vista con control deslizante que aplica zoom y desplaza ambas imágenes conjuntamente, con un modo de pantalla completa
  • Compara imágenes de distintos tamaños alineándolas en la esquina superior izquierda o cambiando el tamaño de la segunda

Cómo funciona

La comparación utiliza pixelmatch, la biblioteca de código abierto en la que se basan muchas herramientas de pruebas visuales. Para cada píxel, mide la distancia de color en el espacio de color YIQ, que da más peso al brillo que al tono, tal como lo hace el ojo humano. Un píxel se considera diferente cuando la distancia supera el umbral. Antes de contabilizarlo, pixelmatch comprueba los píxeles vecinos para determinar si forma parte de un borde con antialiasing. La herramienta lee los valores de píxel almacenados en los archivos e ignora los perfiles de color incrustados, por lo que dos archivos que se decodifican en los mismos píxeles siempre coinciden. Todo se ejecuta en tu navegador y las imágenes nunca se cargan en un servidor.

Consejos

  • Mantén el umbral en 0,1 para las capturas de pantalla. Redúcelo a 0 para detectar cualquier cambio, incluido el ruido de compresión JPEG; auméntalo para ignorar pequeñas variaciones de color.
  • Una foto guardada dos veces como JPEG puede diferir en miles de píxeles por una cantidad mínima. Si el resultado indica que no hay diferencias por encima del umbral, las imágenes se ven iguales.
  • Activa Marcar los píxeles más oscuros para ver qué contenido se añadió y cuál se eliminó, ya que el texto sobre un fondo claro se vuelve más oscuro donde aparece.
  • En los archivos GIF, solo se compara el primer fotograma.