Vérificateur de différences d'image

Vous avez envoyé un ajustement CSS et vous souhaitez savoir exactement ce qui a bougé ? Vous comparez deux captures d'écran pour un contrôle de régression visuelle d'assurance qualité ? Vous vous demandez ce qui a réellement changé entre deux versions exportées de la même photo ? Faire défiler d’avant en arrière entre deux images et plisser les yeux pour détecter les différences est lent et peu fiable – cet outil superpose les deux et vous montre chaque pixel modifié dans une seule image.

La comparaison est un véritable calcul mathématique de différence de pixels, la même famille d'algorithmes utilisés par des outils comme pixelmatch : chaque pixel des deux images est converti de RVB en espace colorimétrique YIQ (Y = luma, I et Q = les axes de chrominance NTSC), et la distance euclidienne entre les deux points YIQ est calculée. Cette distance est comparée à un seuil défini par le curseur de sensibilité : augmentez la sensibilité pour détecter les changements de couleur subtils, réduisez-la pour ignorer le bruit de compression et ne vous souciez que des changements évidents.

Une comparaison naïve par pixel éclairerait chaque bord anticrénelé comme "différent" même si rien de significatif ne change, car le lissage décale une poignée de pixels de bordure de quelques nuances. Cet outil exécute une véritable heuristique d'anticrénelage sur les deux images : un pixel n'est traité comme une véritable différence que s'il ne se trouve PAS à l'intérieur d'un dégradé de lissage - concrètement, si son propre voisinage 3x3 dans l'une ou l'autre image source ne contient pas déjà à la fois un pixel plus clair et un pixel plus sombre que lui-même, ce qui est l'empreinte digitale d'un bord lissé par AA plutôt que le contenu réel.

Téléchargez l'image A et l'image B, ajustez la sensibilité si nécessaire et appuyez sur Exécuter. Vous obtenez un pourcentage exact de pixels qui diffèrent ainsi qu'une image différente avec chaque changement réel mis en évidence en magenta vif sur une version grisée de l'original - téléchargez-le et joignez-le directement à votre rapport de bug ou à vos notes d'assurance qualité. Les deux images doivent partager les mêmes dimensions ; si ce n'est pas le cas, l'outil vous l'indique clairement au lieu de recadrer ou d'étirer silencieusement l'un d'entre eux. Rien ne quitte votre navigateur à aucun moment.