Qu’est-ce qu’une comparaison d’images ?

Une comparaison d’images compare deux versions d’une image pixel par pixel et marque chaque endroit où elles diffèrent. Les développeurs l’utilisent pour les tests de régression visuelle : une capture d’écran d’une page effectuée avant une modification du code est comparée à une autre prise après celle-ci. Ainsi, un décalage involontaire, une icône manquante ou une couleur modifiée se remarque même lorsque les deux captures semblent identiques au premier coup d’œil.

Description de l’outil

Cet outil compare deux images et génère une image des différences : les différences apparaissent en rouge sur une copie estompée de la première image. Il compte les pixels différents, regroupe les différences proches en régions et mesure la surface qu’elles couvrent. Les contours lissés du texte et des formes sont détectés comme de l’anti-crénelage et exclus du décompte, afin qu’une capture prise avec un moteur de rendu des polices légèrement différent ne soit pas signalée comme une modification. Vous pouvez également faire glisser un curseur sur les deux images et zoomer simultanément sur les deux.

Fonctionnalités

  • Comparer des images PNG, JPEG, WebP, GIF, BMP et AVIF
  • Compter les pixels différents et les afficher sous forme de proportion de l’image
  • Regrouper les différences proches en régions et tracer le contour de chaque région dans l’image des différences
  • Ignorer les pixels avec anti-crénelage et les marquer avec une couleur distincte, ou les compter si vous le préférez
  • Régler le seuil définissant l’écart minimal entre deux couleurs pour qu’elles soient considérées comme différentes
  • Ajouter une deuxième couleur pour les pixels devenus plus foncés, afin de distinguer le contenu ajouté du contenu supprimé
  • Activer le mode différences uniquement, qui affiche les différences sur un arrière-plan transparent
  • Effectuer un zoom jusqu’à 3200 % avec des pixels nets et télécharger les différences au format PNG
  • Utiliser la vue avec curseur pour zoomer et déplacer les deux images simultanément, avec un mode plein écran
  • Comparer des images de tailles différentes en les alignant en haut à gauche ou en redimensionnant la seconde image

Fonctionnement

La comparaison utilise pixelmatch, la bibliothèque open source à l’origine de nombreux outils de test visuel. Pour chaque pixel, elle mesure la distance entre les couleurs dans l’espace colorimétrique YIQ, qui accorde davantage de poids à la luminosité qu’à la teinte, comme le fait l’œil humain. Un pixel est considéré comme différent lorsque la distance dépasse le seuil. Avant de le compter, pixelmatch vérifie les pixels voisins pour déterminer s’il fait partie d’un contour avec anti-crénelage. L’outil lit les valeurs des pixels stockées dans les fichiers et ignore les profils colorimétriques intégrés : deux fichiers qui sont décodés en pixels identiques correspondent donc toujours. Tout s’exécute dans votre navigateur et les images ne sont jamais téléversées.

Conseils

  • Conservez le seuil à 0,1 pour les captures d’écran. Réduisez-le à 0 pour détecter chaque modification, y compris les artefacts de compression JPEG ; augmentez-le pour ignorer les petites variations de couleur.
  • Une photo enregistrée deux fois au format JPEG diffère au niveau de milliers de pixels, mais seulement de façon infime. Si le résultat n’indique aucune différence supérieure au seuil, les images semblent identiques.
  • Activez l’option Marquer les pixels plus foncés pour voir quel contenu a été ajouté et quel contenu a été supprimé, car le texte sur un arrière-plan clair devient plus foncé là où il apparaît.
  • Pour les fichiers GIF, seule la première image est comparée.