Écart d’un pixel
d = max(|ΔR|, |ΔG|, |ΔB|, |ΔA|) > 32
Le pixel est compté comme différent quand le plus grand écart de canal dépasse 32 sur 255.
Comparateur d’images
Chargez deux images : comparez-les au curseur ou côte à côte, ou affichez en rouge les pixels modifiés avec leur pourcentage, localement.
Image
Aucune image chargée
Déposez une image ici
Ajoutez exactement deux images à comparer. Vous pouvez les sélectionner ensemble ou ajouter la seconde après la première.
Besoin de plus de possibilités ?
Retrouvez plusieurs outils dans un seul espace de travail, avec votre fichier et vos modifications en cours.
Ouvrir l’éditeur completTraitement en cours…0 %
Cet outil vous a-t-il été utile ?
Comment fonctionne cet outil ?
Deux versions d’une même image se ressemblent souvent au point qu’on ne voit plus ce qui a changé : une maquette corrigée, une capture avant et après une mise à jour, une photo retouchée ou recompressée. Ce comparateur les affiche au curseur avant/après, côte à côte, ou surligne en rouge les pixels qui diffèrent avec leur pourcentage, sans envoyer les images en ligne.
Ajoutez exactement deux images PNG, JPEG ou WebP, en les sélectionnant ensemble ou l’une après l’autre ; la première devient « Avant », la seconde « Après ». Avant / après superpose les deux images avec une séparation verticale à faire glisser, et Côte à côte les place à gauche et à droite. Le zoom aide à inspecter les détails.
Différences compare les deux images pixel par pixel. Un pixel est marqué en rouge quand l’un de ses canaux (rouge, vert, bleu ou transparence) s’écarte de plus de 32 niveaux sur 255 ; les autres pixels sont affichés en gris clair à partir de la première image, pour garder le contexte. Le seuil évite de signaler le bruit d’une compression JPEG.
Le résultat indique le pourcentage et le nombre de pixels différents. Si les deux images n’ont pas la même taille, la seconde est mise à la taille de la première avant le calcul, et un message le signale. Cliquez de nouveau sur Différences ou sur un autre mode pour revenir aux images.
Comment utiliser cet outil ?
Ajoutez les deux images
Sélectionnez l’original puis la version modifiée, ensemble ou l’une après l’autre.
Choisissez la vue
Avant / après pour le curseur, Côte à côte, ou Différences pour surligner les pixels modifiés.
Inspectez les écarts
Zoomez sur les zones signalées et lisez le pourcentage de pixels différents.
Détection des différences
Chaque pixel de la seconde image est comparé au pixel de même position dans la première.
Part de pixels différents
p = n_diff ÷ (W × H) × 100
Calculée à la taille de la première image.
- ΔR, ΔG, ΔB, ΔA
- écarts des canaux rouge, vert, bleu et alpha entre les deux images
- n_diff
- nombre de pixels marqués en rouge
- W, H
- largeur et hauteur de la première image
Cas d'utilisation
Relire une maquette corrigée
Repérez tout de suite ce qui a bougé entre deux versions d’un écran ou d’un visuel.
Vérifier une régression visuelle
Comparez une capture avant et après une mise à jour pour trouver le bouton ou le texte modifié.
Juger une retouche ou une compression
Voyez au curseur si une photo optimisée a perdu des détails par rapport à l’original.
Exemples
Bouton modifié sur une capture d’écran
200 × 50 = 10 000 pixels modifiés sur 1 280 × 720 = 921 600, soit 1,09 %. Le reste de l’écran s’affiche en gris clair.
Entrée
Deux captures de 1 280 × 720 px ; seul un bouton de 200 × 50 px change de couleurRésultat
Vue Différences : le bouton apparaît en rouge ; « 1,09 % des pixels diffèrent (10 000 sur 921 600) »Deux images de tailles différentes
Le rapport 16:9 est identique, donc rien n’est déformé ; les contours peuvent toutefois apparaître en rouge à cause du lissage de l’agrandissement.
Entrée
Original de 1 920 × 1 080 px et version exportée en 1 280 × 720 pxRésultat
La seconde image est mise à 1 920 × 1 080 px avant la comparaison, avec un message qui le signaleConseils et bonnes pratiques
- Mettez toujours l’original en premier : la vue Différences utilise sa taille et ses tons de gris comme fond.
- Pour comparer deux exports, gardez les mêmes dimensions : une mise à l’échelle crée des écarts sur tous les contours.
- Utilisez le curseur Avant / après pour juger une retouche de couleur, et Différences pour trouver un changement localisé.
- Un faible pourcentage sur une photo recompressée en JPEG est normal : la compression modifie légèrement des milliers de pixels.
Sources et références
- Canvas API (s’ouvre dans un nouvel onglet), MDN Web DocsPage en anglais
Questions fréquentes
Combien d’images puis-je comparer ?
Exactement deux. Si vous en sélectionnez une seule, l’outil attend la seconde ; au-delà de deux, il demande de recommencer.
Comment les différences sont-elles détectées ?
Chaque pixel est comparé à celui situé au même endroit dans l’autre image. Il est marqué en rouge si l’un des canaux rouge, vert, bleu ou alpha diffère de plus de 32 sur 255.
Les images doivent-elles avoir la même taille ?
Non, mais c’est préférable. La seconde est mise à la taille de la première ; si les proportions diffèrent, elle est déformée et beaucoup de pixels apparaîtront comme différents.
Puis-je régler la sensibilité ?
Pas dans cette version : le seuil est fixé à 32 niveaux, assez pour ignorer le bruit de compression tout en voyant un changement de couleur ou de texte.
Puis-je télécharger l’image des différences ?
Non, le comparateur sert à l’inspection à l’écran. Faites une capture de la vue Différences si vous devez la partager.
Mes images sont-elles envoyées sur un serveur ?
Non. L’affichage et le calcul des différences ont lieu dans votre navigateur.
Outils associés
Continuez avec ces outils
Des outils similaires ou complémentaires à celui-ci.
Outils similaires
Recadrez, redimensionnez, ajoutez du texte ou un filigrane, appliquez des effets et optimisez une image dans un seul éditeur.
Images & graphismeMis en avantUtiliser l’outil
Allégez une image en réglant sa qualité ou en visant un poids en Ko, avec le poids final affiché avant le téléchargement.
Images & graphismeMis en avantUtiliser l’outil
Convertissez une image en PNG, JPEG ou WebP et ajustez sa qualité avant téléchargement.
Images & graphismeMis en avantUtiliser l’outil
À lire aussi
GuideBonnes pratiquesDébutant
Métadonnées d’image : les lire, les conserver ou les supprimer
Comprenez quelles métadonnées peuvent être intégrées à une image, à quoi elles servent et quand les conserver ou les supprimer avant de partager un fichier.
31 août 202628 min
GuideBonnes pratiquesDébutant
Convertir un PDF en images ou extraire les images qu’il contient
Comprenez la différence entre rasteriser les pages d’un PDF, extraire les images intégrées, optimiser les rendus Web et réunir des images dans un PDF.
29 août 20264 min
GuideBonnes pratiquesDébutant
Comment optimiser 50 images pour le Web en une seule fois
Redimensionnez un lot d’images, convertissez-le en WebP et retirez les métadonnées avec un Pipeline unique.
6 septembre 20263 min
TutorielBonnes pratiquesDébutant
Optimiser ses images pour le Web sans perdre en qualité
Redimensionnement, compression, WebP, AVIF, métadonnées et traitement par lot : une méthode complète pour alléger les images d’un site sans dégrader inutilement leur rendu.
30 août 20265 min