Comparaison de Screenshots : Pixel Diff, pHash et SSIM Expliqués Simplement
La comparaison de screenshots est le processus algorithmique par lequel un outil de test visuel détermine si deux captures d'écran d'une même page web sont identiques ou différentes — et si elles sont différentes, à quel point et où.
Derrière chaque outil de test visuel, il y a un ou plusieurs algorithmes de comparaison d'images. Trois méthodes dominent le marché. Chacune a une philosophie différente, et comprendre ces différences vous aidera à choisir le bon outil — ou à comprendre pourquoi votre outil actuel vous donne des résultats frustrants.
Le Pixel Diff : compter les points
Le pixel diff est l'approche la plus directe. L'algorithme prend deux images de même dimension, parcourt chaque pixel, et compare les valeurs de couleur (rouge, vert, bleu, transparence). Si les valeurs diffèrent, le pixel est marqué comme "différent".
Imaginez deux feuilles de papier millimétré identiques sauf que quelqu'un a colorié 3 cases en rouge sur la deuxième. Le pixel diff trouverait exactement ces 3 cases.
Normalement, on vous mettrait la formule mathématique ici. Mais franchement, en 2026, si vous voulez la formule de la distance euclidienne en espace RGB, vous la trouvez plus vite en la demandant à une IA qu'en lisant cet article. Ce qui compte, c'est de comprendre le principe.
L'algorithme produit deux choses : le nombre (ou pourcentage) de pixels différents, et une image "diff" où les zones de différence sont colorées en rouge.
C'est simple, rapide, déterministe. Mais c'est brutal. Un léger changement d'anti-aliasing sur un texte — invisible à l'œil nu — peut marquer des centaines de pixels comme "différents". Le test échoue pour rien.
Le pHash : la signature visuelle
Le pHash (Perceptual Hash) prend une approche radicalement différente. Au lieu de comparer pixel par pixel, il réduit chaque image à une "empreinte" courte — typiquement 64 bits — qui capture la structure visuelle globale.
Pensez-y comme la mélodie d'une chanson. Vous pouvez reconnaître "La Marseillaise" même si elle est jouée au piano, à la guitare ou chantée par quelqu'un qui chante faux. La mélodie est la même — les détails changent. Le pHash fonctionne pareil avec les images.
L'algorithme réduit l'image à une très petite taille (par exemple 32x32 pixels), la convertit en niveaux de gris, applique une transformation mathématique qui extrait les basses fréquences (la structure globale), et produit une séquence de bits.
Deux images visuellement similaires auront des empreintes proches. La "distance" entre les empreintes (nombre de bits différents, appelée distance de Hamming) mesure la similarité.
L'avantage : immunisé aux micro-variations (anti-aliasing, compression légère, redimensionnement). Le problème : peu précis pour les détails. Un changement de couleur subtil ou un décalage de 5 pixels peut passer inaperçu si la structure globale reste similaire.
Le SSIM : l'œil mathématique
Le SSIM (Structural Similarity Index Measure) est la méthode la plus sophistiquée des trois. Il ne compare pas les pixels individuellement ni l'image globalement — il compare des zones de l'image selon trois critères perceptuels.
La luminance : les zones sont-elles aussi claires l'une que l'autre ? Le contraste : les variations de luminosité sont-elles similaires ? La structure : les motifs de pixels sont-ils agencés de la même façon ?
L'algorithme parcourt l'image avec une fenêtre glissante et calcule ces trois mesures pour chaque zone. Le résultat est un score entre 0 et 1 — plus c'est proche de 1, plus les images sont similaires perceptuellement.
Un score SSIM de 0.99 signifie "quasiment identique pour un humain". Un score de 0.95 signifie "des différences visibles mais mineures". En dessous de 0.90, les différences sont évidentes.
L'avantage : c'est la méthode qui se rapproche le plus de la perception humaine. Elle tolère les variations de rendu sans masquer les vrais changements. Le problème : c'est plus lent que le pixel diff, et le seuil de tolérance doit être calibré avec soin.
Ce que chaque méthode rate
Le pixel diff rate le contexte. Il ne sait pas si un pixel différent est important ou pas. Un changement d'anti-aliasing et un bouton qui disparaît génèrent le même type d'alerte.
Le pHash rate les détails. Sa force (la vue d'ensemble) est aussi sa faiblesse. Les changements subtils — une police légèrement plus grande, un espacement modifié de 2px — passent sous le radar.
Le SSIM est le meilleur compromis, mais il nécessite un calibrage fin du seuil. Trop strict, il se comporte comme un pixel diff. Trop permissif, il laisse passer des régressions.
L'approche structurelle : au-delà de l'image
Il existe une quatrième approche qui ne compare pas des images du tout. L'analyse structurelle compare les propriétés CSS calculées et le DOM directement. C'est ce que fait Delta-QA avec son algorithme en 5 passes.
Au lieu de se demander "est-ce que les pixels sont identiques ?", elle se demande "est-ce que les propriétés CSS de chaque élément sont identiques ?". La font-size a-t-elle changé ? La marge a-t-elle bougé ? La couleur est-elle différente ?
C'est plus précis (zéro faux positif lié au rendu) et plus informatif (on sait exactement quoi a changé et de combien). Mais c'est aussi plus complexe à implémenter.
FAQ
Quelle méthode est la plus rapide ?
Le pixel diff est le plus rapide. Le pHash est légèrement plus lent à cause de la transformation. Le SSIM est le plus lent car il parcourt l'image avec une fenêtre glissante.
Quelle méthode produit le moins de faux positifs ?
Le SSIM en mode bien calibré. Le pHash est aussi bon pour ignorer le bruit mais il peut manquer des détails. Le pixel diff produit le plus de faux positifs.
Les outils utilisent-ils une seule méthode ?
Pas toujours. Certains combinent pixel diff + SSIM. D'autres ajoutent une couche d'IA par-dessus. Delta-QA utilise une approche structurelle qui ne dépend pas de la comparaison d'images.
Le pHash peut-il détecter un changement de couleur ?
Seulement si le changement est significatif. Un passage de bleu foncé à bleu légèrement plus clair sera probablement ignoré. Un passage de bleu à rouge sera détecté.
Quel seuil SSIM utiliser pour le test visuel ?
Pour du test de régression strict : 0.99. Pour du monitoring avec tolérance au bruit : 0.95-0.97. En dessous de 0.95, vous risquez de manquer des régressions réelles.
Le pixel diff vous dit que quelque chose a changé. Le pHash vous dit si c'est visuellement différent dans l'ensemble. Le SSIM vous dit à quel point c'est différent pour l'œil humain. L'analyse structurelle vous dit exactement quoi a changé et pourquoi. Quatre approches, quatre niveaux de réponse. Le bon choix dépend de la question que vous posez.
Essayer Delta-QA Gratuitement →
Article précédent : Test Visuel On-Premise