Comparador de diferencias de imágenes
Sube dos imágenes y obtén una diferencia visual precisa a nivel de píxel entre ellas, con comparación perceptual YIQ y resaltado que ignora el suavizado de bordes. 100 % local en tu navegador.
🔒 Procesado íntegramente en su navegador: nada de lo que ingresa aquí se carga nunca.
Resultado
¿Lanzaste un ajuste de CSS y quieres saber exactamente qué se movió? ¿Comparas dos capturas de pantalla para una verificación de regresión visual? ¿Te preguntas qué cambió realmente entre dos versiones exportadas de la misma foto? Ir y venir entre dos imágenes bizqueando en busca de diferencias es lento y poco fiable: esta herramienta superpone ambas y te muestra cada píxel modificado en una sola imagen.
La comparación se basa en matemática real de diferencias de píxeles, la misma familia de algoritmos que usan herramientas como pixelmatch: cada píxel de ambas imágenes se convierte del espacio RGB al YIQ (Y = luma, I y Q = ejes de crominancia NTSC) y se calcula la distancia euclidiana entre los dos puntos YIQ. Esa distancia se compara con un umbral definido por el control de sensibilidad: aumenta la sensibilidad para detectar cambios de color sutiles; redúcela para ignorar el ruido de compresión y centrarte solo en las diferencias obvias.
Una comparación ingenua píxel por píxel marcaría cada borde suavizado como «diferente» incluso cuando no cambió nada relevante, porque el suavizado desplaza un puñado de píxeles del contorno en unos pocos tonos. Esta herramienta aplica una heurística real de suavizado en ambas imágenes: un píxel solo se considera una diferencia genuina si NO se encuentra dentro de un degradado de suavizado; concretamente, si su propio vecindario de 3x3 en cualquiera de las imágenes originales no contiene ya un píxel más claro y otro más oscuro que él mismo, que es la huella digital de un borde suavizado por AA en lugar de contenido real.
Sube la Imagen A y la Imagen B, ajusta la sensibilidad si es necesario y pulsa Ejecutar. Obtienes un porcentaje exacto de píxeles que difieren más una imagen de diferencias con cada cambio real resaltado en magenta brillante sobre una versión atenuada de la original; descárgala y adjúntala directamente a tu informe de errores o notas de QA. Ambas imágenes deben tener las mismas dimensiones; si no es así, la herramienta te lo indica claramente en lugar de recortar o estirar una de ellas sin avisar. Nada sale de tu navegador en ningún momento.