Commencez par faire correspondre la ligne de base et les fichiers modifiés à partir de la même scène, mise en page, fenêtre ou flux de travail d'exportation.
Guide du vérificateur de différences d'images
Comment utiliser un vérificateur de différence d'image
Examen au niveau des pixels pour les captures d'écran, les exportations de compression, les modifications de produits et les petites modifications visuelles nécessitant des mesures de différence locales.
Exécutez Diff surlignée pour la détection des zones modifiées, puis confirmez le résultat en mode curseur, côte à côte ou superposition.
Utilisez le seuil, les pixels modifiés, le RMSE et le PSNR comme signaux de révision. La décision finale vient toujours du résultat visible.
Examen des pixels pour les zones modifiées exactes
Un vérificateur de différences d'images localise les différences entre deux images liées. Il s'adapte aux vérifications de capture d'écran de l'interface utilisateur, à l'examen des retouches de produits, à l'examen des exportations de compression et aux petits changements visuels faciles à manquer dans un curseur.
L'outil compare les pixels décodés par le navigateur sur un canevas partagé. Un pixel est considéré comme modifié une fois que le plus grand delta de canal rouge, vert, bleu ou alpha dépasse le seuil sélectionné.
Flux de travail
Séquence d'examen des différences
Chargez d'abord l'image de base
Utilisez l'original, la capture d'écran précédente ou l'exportation de référence comme image de référence. Une ligne de base claire facilite la détection des modifications du nombre de pixels.
Chargez l'image modifiée en seconde
Utilisez la nouvelle capture d'écran, la photo modifiée, l'image optimisée ou la variante exportée comme image modifiée. Les dimensions qui ne correspondent pas nécessitent une vérification d'alignement avant l'examen des métriques.
Exécuter la différence de surbrillance
Diff surlignée marque les zones modifiées et remplit les cartes métriques. Les vues avec curseur, côte à côte et superposition vérifient le résultat mis en surbrillance dans un contexte visuel.
Ajuster délibérément le seuil
Des seuils inférieurs détectent des changements subtils. Des seuils plus élevés ignorent le bruit de compression, les minuscules changements d’éclairage et l’anticrénelage. Mettez à jour le diff après avoir modifié le seuil.
Seuil
Comment choisir un seuil de différence
Le seuil définit la coupure de différence de canal pour les pixels modifiés. Il n’existe pas de meilleure valeur universelle ; faire correspondre la valeur à la tâche de révision.
8
Contrôles stricts de l'interface utilisateur
Essayez 8 pour les petites modifications de capture d'écran qui doivent être clairement détectées.
L’étiquette d’un bouton est passée de Enregistrer à Appliquer.
Une icône s'est légèrement déplacée, une fine bordure a disparu ou l'espacement du texte a été modifié.
Cette valeur peut également détecter de minuscules bruités de rendu autour du texte et des bords.
18
Détails photo fins
Essayez 18 pour les modifications d'image qui ne sont visibles qu'après un examen plus approfondi.
L'ombre d'un produit est devenue plus douce, une retouche du visage a supprimé une petite marque ou la texture du tissu a changé.
Une photo est presque identique, mais une surbrillance, un reflet ou une zone de couleur a été modifié.
Bon pour un examen attentif.
32
Valeur par défaut équilibrée
Commencez par 32 pour la plupart des comparaisons.
Une capture d'écran d'une page de destination contient à la fois du texte et des photos.
Une image de produit a été à nouveau exportée ou un aperçu d'un autre outil nécessite une vérification rapide.
Passez plus bas pour des contrôles plus stricts, plus haut pour des fichiers plus bruyants.
64
Des changements visibles majeurs
Essayez 64 de vous concentrer sur les changements évidents.
Un arrière-plan a été remplacé, un objet déplacé, un recadrage modifié ou un fort changement de couleur est apparu.
Une exportation JPEG ou WebP comporte peu du bruit, mais l'examen ne s'intéresse qu'aux changements que les gens remarquent rapidement.
Les petits textes, les icônes fines et les bordures fines peuvent ne plus ressortir.
Métriques
Comment lire les métriques de différence d'image
Pixels modifiés
Nombre de pixels de canevas comparables au-dessus du seuil actuel. La valeur dépend fortement du seuil et de l'alignement.
Pourcentage de pixels modifié
Pixels modifiés divisés par tous les pixels comparables. Il permet de comparer deux exécutions avec des tailles d'image ou des zones de recadrage différentes.
Delta RVB moyen
La différence moyenne absolue des canaux RVB. De larges changements de couleur ou de luminosité peuvent apparaître ici même avec un petit pourcentage de zone modifiée.
RMSE
Erreur quadratique moyenne RVB. Les différences locales plus importantes affectent plus fortement le RMSE que les petites différences éparses.
PSNR
Rapport signal/bruité maximal. Un PSNR plus élevé signifie généralement que les images sont plus proches en signal RVB ; un PSNR inférieur signifie une erreur plus visible ou mesurable.
Pièges courants
Des résultats différents qui nécessitent un second examen
Les images sont légèrement décalées
Un décalage de 1 px peut éclairer de nombreuses zones, même si l'image semble presque identique. Ouvrez Superposition et vérifiez si les bords principaux sont alignés.
Les tailles des images ne correspondent pas
Différentes largeurs ou hauteurs rendent la comparaison moins directe. Utilisez les vues visuelles pour rechercher le changement visible, puis recadrez ou exportez les tailles correspondantes pour des métriques plus claires.
Le bruit de compression apparaît
Les exportations JPEG et WebP ajoutent souvent de minuscules taches sur les aplats et les bords. Augmentez le seuil si l'examen concerne des modifications visibles.
Les bords du texte ont été modifiés lors du rendu
Les polices, les icônes et les bords vectoriels peuvent atterrir sur des pixels légèrement différents après une modification du navigateur, de la police ou de l'exportation. Utilisez un seuil bas pour le contrôle qualité des captures d’écran, puis confirmez visuellement la zone en surbrillance.
Cas d'utilisation
Réviser les tâches de ce guide
Examen de la régression de la capture d'écran de l'interface utilisateur
Comparaison de la qualité de compression d'image
Revue de retouche photo du produit
Avant et après les contrôles de modification
Petites différences de mise en page ou d'exportation
Essayer
Ouvrez l'outil après avoir lu le guide
Chargez une image de base et une image modifiée, exécutez Diff surlignée, puis ajustez le seuil jusqu'à ce que les zones en surbrillance correspondent à la tâche de révision.
FAQ
Utiliser un vérificateur de différence d'image
Quel seuil dois-je utiliser dans un vérificateur de différences d'image ?
Commencez par 32 pour un examen général. Utilisez 8 pour des contrôles stricts de capture d'écran de même taille, 18 pour des détails fins sur les photos et 64 pour des changements visibles plus importants.
Qu'est-ce qui crée de nombreux pixels modifiés dans des images similaires ?
Les petits changements d'alignement, l'anticrénelage, le bruit de compression, les différences de profil de couleur et les minuscules changements d'éclairage peuvent tous compter comme des pixels modifiés. Utilisez la vue Superposition et l’ajustement du seuil pour comprendre le résultat.
Le RMSE et le PSNR sont-ils meilleurs que le pourcentage de pixels modifié ?
Ils répondent à une question différente. Le pourcentage de pixels modifié indique la superficie qui a franchi le seuil, tandis que RMSE et PSNR résument l'erreur RVB sur le canevas comparable.
Mes données d'image sont-elles en sécurité ?
Oui. L'aperçu de l'image et la comparaison des pixels s'exécutent localement dans votre navigateur. Le diff ne nécessite pas de téléchargement sur le serveur, vos données d'image restent donc dans la session active du navigateur.