Sobre esta herramienta
Image Diff compara dos imágenes píxel a píxel y resalta exactamente dónde difieren, completamente en tu navegador. Suelta una captura de pantalla o maqueta de diseño "antes" como Imagen A y una versión "después" —una nueva captura, una versión implementada del mismo diseño, o una copia reexportada— como Imagen B. Si las dos imágenes no tienen el mismo tamaño, ambas se colocan en un lienzo con el tamaño suficiente para la más grande; cualquier área cubierta por una sola imagen se cuenta como diferencia, ya que un cambio de tamaño es en sí mismo algo que querrías detectar. El resultado es una imagen de diferencias: la Imagen A renderizada de nuevo con cada píxel que cambió pintado en magenta brillante, junto con un recuento y porcentaje de cuántos píxeles difieren.
Este es un flujo de trabajo genuinamente orientado a desarrolladores: detectar regresiones visuales comparando dos capturas tomadas antes y después de un cambio de CSS o de un componente, verificar una interfaz implementada contra su maqueta de diseño original píxel por píxel, o detectar el ligero bloqueo y las bandas que una segunda ronda de compresión JPEG/WebP añade a una imagen ya exportada una vez. El umbral de sensibilidad controla cuán grande debe ser un cambio de color para que un píxel cuente como diferente: valores más bajos (cercanos a 0) marcan casi cualquier cambio, incluido el ruido de compresión de 1–2 bits, mientras que valores más altos solo marcan diferencias claramente visibles, que suele ser lo que quieres al comparar dos exportaciones de la misma imagen fuente. No se sube nada: ambas imágenes se decodifican y comparan con la API Canvas directamente en tu dispositivo, y la imagen de diferencias que descargas se genera de la misma manera.
Preguntas frecuentes
¿Qué pasa si las dos imágenes tienen tamaños diferentes?
Ambas imágenes se colocan en un lienzo común dimensionado para ajustarse a la más grande de las dos, y cualquier área cubierta solo por una de las imágenes (porque la otra es más pequeña) cuenta como una diferencia; esto muestra correctamente las discrepancias de tamaño como parte de la comparación, en lugar de estirar silenciosamente una imagen para que coincida con la otra (lo cual distorsionaría la comparación y ocultaría el hecho de que son de tamaños diferentes en primer lugar).
¿Qué umbral de sensibilidad debo usar?
Un umbral bajo capta incluso diferencias diminutas y sutiles (útil para detectar artefactos de compresión o cambios de renderizado muy menores), mientras que un umbral más alto solo marca píxeles obviamente diferentes (útil para detectar cambios visuales significativos como elementos movidos o contenido diferente, ignorando el ruido menor de anti-aliasing/compresión entre dos imágenes por lo demás idénticas). Comienza aproximadamente en el medio del rango y ajusta según si ves demasiado ruido (súbelo) o te faltan diferencias reales (bájalo).