Outil de différences d'images
Comparez deux images côte à côte et détectez instantanément les différences au niveau des pixels. Ajustez le seuil de sensibilité, alternez entre les sorties surlignage et carte thermique, et téléchargez une image de différences pour les revues QA. Entièrement local, sécurisé et gratuit, sans inscription.
Upload two images to highlight pixel-level differences. All processing runs locally in your browser, and files never leave your device.
First Image
Second Image
Lower values detect subtle differences, while higher values ignore minor compression artifacts.
Both views are generated from pixel math on resized canvases for deterministic comparison results.
Pourquoi utiliser notre outil de différences d'images ?
- Précision au niveau des pixels : Détectez les différences visuelles exactes entre deux images grâce à une comparaison déterministe des pixels, pour ne manquer ni les modifications subtiles ni les changements de rendu.
- Contrôle du seuil : Ajustez le seuil de sensibilité pour ignorer le petit bruit de compression ou faire apparaître les micro-changements, selon votre flux QA et la qualité des ressources.
- Traitement rapide dans le navigateur : Comparez les images instantanément sans attendre de file d'attente serveur. L'outil fonctionne entièrement dans votre navigateur pour une revue de design et un débogage rapides.
- Privé par défaut : Les images sources comme les sorties de différences restent sur votre appareil. Rien n'est téléversé, stocké ou partagé, ce qui le rend sûr pour les ressources confidentielles.
Qu'est-ce que la comparaison de différences d'images ?
La comparaison de différences d'images est le processus de mesure des différences visuelles entre deux images au niveau des pixels. Au lieu de s'appuyer sur une inspection visuelle manuelle, un outil de différences calcule la distance de couleur de chaque paire de pixels, puis marque les différences dans une couche de sortie générée. Le contrôle qualité devient ainsi reproductible et objectif.
Comment fonctionne notre outil de différences d'images
L'outil charge les deux fichiers dans des tampons canvas du navigateur, les normalise à une taille de comparaison commune et calcule un delta par pixel sur les canaux RVB. Les pixels dépassant le seuil sélectionné sont traités comme modifiés et rendus en mode surlignage ou carte thermique pour une revue humaine plus rapide.
Sortie du processus de différences d'images
En plus d'une image visuelle de différences, l'outil fournit des métriques quantitatives utilisables pour les vérifications réussite/échec en QA de design et en tests de régression visuelle.
- Pixels différents : Nombre absolu de pixels modifiés après filtrage par seuil.
- Taux de différence : Pourcentage de pixels modifiés par rapport au total des pixels comparés.
- Résolution comparée : Taille de canvas commune utilisée pour rendre les deux entrées comparables.
- Delta maximal : Plus grande distance de couleur observée sur toutes les comparaisons de pixels.
Bonnes pratiques pour des résultats précis
Utilisez des images sources de dimensions cohérentes lorsque c'est possible et évitez les recompressions répétées avant la comparaison. Commencez par un seuil bas pour détecter les changements fins, puis augmentez-le pour supprimer le bruit de compression attendu. Pour les pipelines QA, gardez le seuil fixe d'une exécution à l'autre afin que les résultats restent stables et auditables.
Foire aux questions
Un outil de différences d'images compare deux images et met en évidence les zones où les pixels diffèrent. Il est couramment utilisé pour la QA de design, les tests de régression visuelle et la validation des modifications après compression, redimensionnement ou changement de rendu.
Oui. Cet outil effectue le traitement d'image localement à l'aide des API canvas du navigateur. Vos fichiers ne quittent jamais votre appareil, donc les captures confidentielles et les ressources privées restent entièrement sous votre contrôle.
De petites différences d'encodage, des conversions de profil colorimétrique, l'anticrénelage et les artefacts de compression peuvent produire de légers décalages de pixels difficiles à voir à l'œil. Ajuster le seuil aide à filtrer le bruit mineur attendu.
Le seuil contrôle la sensibilité. Des seuils bas détectent de minuscules changements de couleur ; des seuils élevés ignorent les petits écarts et ne montrent que les différences visuelles marquées. Cela permet d'adapter le comportement aux vérifications strictes ou tolérantes.
L'outil normalise les deux images à la plus petite résolution commune avant la comparaison. Cela garantit un indexage cohérent des pixels et évite les fausses différences dues uniquement à la taille.
Le mode surlignage marque les différences avec un masque solide clair pour une revue rapide réussite/échec. Le mode carte thermique colore les zones modifiées selon leur intensité, ce qui vous aide à inspecter la force de chaque différence.
Oui. Après la comparaison, vous pouvez télécharger l'image de différences générée au format PNG et la partager avec des designers, développeurs ou équipes QA pour la documentation et la revue.