Loading...
Loading...
Déposez deux images et mettez en évidence chaque pixel modifié. Ajustez le seuil pour ignorer le bruit de compression mineur, voyez le pourcentage de changement exact et exportez le diff en PNG.
Choose two images to start comparing them pixel by pixel.
Un visualiseur de différence de pixels compare deux images au niveau des pixels et met en évidence chaque position où les valeurs de couleur diffèrent. C'est l'équivalent visuel d'une différence de code : vous voyez exactement ce qui a changé entre deux captures d'écran, deux exports de design ou deux instantanés d'un test de régression. Cet outil fonctionne entièrement dans votre navigateur en utilisant l'API HTML Canvas. Il scanne chaque pixel de l'image A par rapport au pixel correspondant de l'image B, additionne les différences de canal absolues et peint tout pixel au-dessus de votre seuil dans la couleur de surlignage que vous choisissez. Vous obtenez également un pourcentage de changement afin de quantifier à quel point les deux images diffèrent réellement.
Déposez ou choisissez l'image A (la référence) et l'image B (la version que vous souhaitez comparer). Des dimensions identiques sont recommandées ; les tailles non correspondantes sont mises à l'échelle automatiquement à l'image A.
Mettre en évidence les changements est le mode par défaut — chaque pixel changé est peint dans votre couleur de surlignage. Côte à côte rend A, B et la différence dans une seule bande ; Superposition empile B à 50% d'opacité sur A.
Faites glisser le curseur de seuil vers le haut pour ignorer le bruit de compression mineur et les petits artefacts JPEG. 5% est un bon point de départ pour les photos compressées ; 0% capture chaque différence de pixel.
Le pourcentage de changement vous indique quelle fraction de pixels dépasse le seuil — pratique pour la révision de régression ou le contrôle qualité de design.
Cliquez sur Télécharger pour enregistrer la différence rendue à pleine résolution. Utile pour les pièces jointes de révision de code et les rapports de bogues.
Pour chaque position de pixel p, avec des canaux (r, g, b) des images A et B : diff(p) = |Ar - Br| + |Ag - Bg| + |Ab - Bb| Un pixel est considéré comme différent lorsque : diff(p) > (seuil% × 765) / 100 où 765 = 3 × 255 est la différence maximale de somme de canal. C'est la même métrique de distance L1 utilisée par des outils de différence d'image comme pixelmatch et resemble.js, juste exprimé comme un seul seuil réglable plutôt que des tolérances par canal.
La distance L1 (Manhattan) sur les canaux RGB est la métrique la plus simple qui capture à la fois les décalages de couleur et les décalages de luminosité. L'alpha est ignoré car la plupart des cas d'utilisation de diff (captures d'écran, régressions photo) fonctionnent sur des images opaques. Pour les images de dimensions différentes, l'image B est redimensionnée à l'image A en utilisant un filtrage bilinéaire de haute qualité avant que la comparaison ne soit effectuée.
Référence : pixelmatch — comparaison d'images au niveau des pixels
| Entrées | Résultat du diff |
|---|---|
Deux PNG identiques 1920×1080 | 0% de changement — le diff est complètement sombre Aucun pixel ne dépasse le seuil ; test de régression idéal réussi. |
Deux JPEG de la même scène à 85% de qualité | ~1–2% avec seuil = 0 Le bruit de compression crée de minuscules différences par pixel ; augmentez le seuil à 5% pour ignorer. |
Exportation de design A vs B (couleur du bouton changée) | Changement confiné au rectangle du bouton La couleur de surbrillance rend la région modifiée instantanément visible. |
Découpez le sujet de n'importe quelle photo avec l'IA sur appareil — aucun téléchargement requis.
Réduisez les fichiers JPG, PNG ou WebP dans votre navigateur avec un curseur de qualité interactif.
Ajustez, filtrez, faites pivoter et recadrez des photos dans le navigateur — pas de téléchargements, pas de filigrane.
Composez des mèmes et des collages d'écran avec de vraies couches — collez, faites glisser, recadrez, légendez, exportez.
Dernière mise à jour