À propos de cet outil
Image Diff compare deux images pixel par pixel et met en évidence exactement où elles diffèrent, entièrement dans votre navigateur. Déposez une capture d'écran ou une maquette « avant » comme Image A et une version « après » — une nouvelle capture, une version implémentée du même design, ou une copie réexportée — comme Image B. Si les deux images n'ont pas la même taille, elles sont toutes deux placées sur un canevas dimensionné pour la plus grande ; toute zone couverte par une seule image compte comme une différence, car un changement de taille est en soi quelque chose que vous voudriez détecter. Le résultat est une image de différences : l'Image A rendue à nouveau avec chaque pixel modifié peint en magenta vif, accompagnée d'un décompte et d'un pourcentage du nombre de pixels qui diffèrent.
C'est un flux de travail vraiment orienté développeur : détecter des régressions visuelles en comparant deux captures d'écran prises avant et après une modification CSS ou de composant, vérifier une interface implémentée par rapport à sa maquette de conception originale pixel par pixel, ou repérer le léger effet de blocs et les bandes qu'une seconde compression JPEG/WebP ajoute à une image déjà exportée une fois. Le seuil de sensibilité contrôle l'ampleur du changement de couleur nécessaire pour qu'un pixel soit considéré comme différent — des valeurs plus basses (proches de 0) signalent presque tout changement, y compris le bruit de compression de 1 à 2 bits, tandis que des valeurs plus élevées ne signalent que les différences clairement visibles, ce qui est généralement ce que vous voulez lors de la comparaison de deux exports de la même image source. Rien n'est envoyé : les deux images sont décodées et comparées avec l'API Canvas directement sur votre appareil, et l'image de différences que vous téléchargez est générée de la même manière.
Questions fréquentes
Que se passe-t-il si les deux images sont de tailles différentes ?
Les deux images sont placées sur un canevas commun dimensionné pour s'adapter à la plus grande des deux, et toute zone couverte par une seule des images (parce que l'autre est plus petite) compte comme une différence — cela fait correctement apparaître les incompatibilités de taille dans le cadre de la comparaison, plutôt que d'étirer silencieusement une image pour correspondre à l'autre (ce qui fausserait la comparaison et cacherait le fait qu'elles sont de tailles différentes en premier lieu).
Quel seuil de sensibilité dois-je utiliser ?
Un seuil bas capte même de minuscules différences subtiles (utile pour détecter des artefacts de compression ou des changements de rendu très mineurs), tandis qu'un seuil plus élevé ne signale que des pixels clairement différents (utile pour repérer des changements visuels significatifs comme des éléments déplacés ou un contenu différent, tout en ignorant le bruit mineur d'anticrénelage/compression entre deux images par ailleurs identiques). Commencez vers le milieu de la plage et ajustez selon que vous voyez trop de bruit (augmentez-le) ou manquez de vraies différences (diminuez-le).