Comparateur d'images
Repère les différences visuelles entre deux images (régression visuelle, export différent, compression) directement dans ton navigateur, sans envoi de fichier.
À quoi sert un comparateur d'images pixel par pixel ?
Quand une page web change de design, qu'un export d'image est régénéré avec un nouvel outil, ou qu'une compression est appliquée, il est souvent difficile de savoir à l'œil nu si le rendu final est vraiment identique. Ce comparateur charge deux images directement dans ton navigateur et compare la couleur de chaque pixel de l'image A avec le pixel correspondant de l'image B. Le résultat est exprimé en pourcentage de pixels différents, accompagné d'une carte visuelle qui met en rouge les zones où un écart a été détecté au-delà du seuil de tolérance choisi.
C'est un usage courant en développement web et en design pour vérifier une régression visuelle après une mise à jour de composant, comparer deux exports d'une même maquette, ou contrôler qu'une compression n'a pas trop dégradé la qualité d'une image. L'outil propose trois modes de visualisation : côte à côte pour comparer directement les deux versions, superposition avec curseur de fondu pour passer progressivement de l'une à l'autre, et carte des différences seule pour repérer d'un coup d'œil les zones qui ont changé.
Comprendre le seuil de tolérance et ses limites
Deux images visuellement identiques ne sont presque jamais strictement identiques au niveau des pixels, notamment à cause de la compression JPEG ou du lissage des contours (anti-aliasing). Le curseur de seuil, de 0 à 100, permet d'ajuster la sensibilité de la détection : à 0, la moindre variation de couleur est signalée ; plus le seuil augmente, plus les écarts mineurs sont ignorés et seules les différences franchement visibles ressortent sur la carte.
Cette comparaison reste une comparaison brute de couleurs à position fixe : elle ne recale pas les images entre elles. Un léger décalage de cadrage, une rotation ou un zoom différent entre les deux fichiers produira de nombreuses différences même si le contenu est en réalité très proche. Pour un résultat fiable, utilise deux images de même cadrage et de même résolution si possible ; sinon, garde à l'esprit que le redimensionnement automatique appliqué quand les tailles diffèrent rend le résultat approximatif.
Chaque image est dessinée sur un canvas HTML, puis les pixels des deux images sont comparés un à un via getImageData : pour chaque pixel, l'écart de couleur (rouge, vert, bleu) entre l'image A et l'image B est calculé sous forme de distance euclidienne. Si cet écart dépasse le seuil de tolérance que tu as réglé, le pixel est marqué comme différent et coloré en rouge sur la carte des différences.
L'image B est automatiquement redimensionnée (via canvas) aux dimensions exactes de l'image A avant la comparaison. Un avertissement s'affiche dans ce cas : le redimensionnement introduit lui-même un flou d'interpolation, donc le résultat devient approximatif et peut surestimer les différences réelles, surtout sur des images avec du texte ou des contours nets.
Deux exports de la même image (par exemple avant/après une compression JPEG) ne sont quasiment jamais identiques pixel pour pixel, même visuellement. Le seuil permet d'ignorer les micro-variations de couleur dues à la compression ou à l'anti-aliasing, pour ne signaler que les différences réellement visibles. Un seuil bas (proche de 0) est très strict, un seuil élevé ignore de plus en plus d'écarts.
Non. Tout le traitement se fait dans ton navigateur via l'API Canvas (getImageData / putImageData). Aucun fichier n'est téléversé, aucune requête réseau n'est déclenchée au moment de la comparaison. Tu peux vérifier via les outils de développement de ton navigateur (onglet Réseau) qu'aucune requête n'est envoyée.
Non, la comparaison est purement pixel par pixel à position identique. Si une des deux images est décalée de quelques pixels, tournée ou zoomée différemment, l'outil signalera de très nombreuses différences même si le contenu visuel est proche. C'est un outil de détection de régression sur des captures alignées (même cadrage, même rendu), pas un outil de recalage ou de détection de similarité perceptuelle avancée.
Les formats gérés sont ceux que ton navigateur sait afficher nativement (JPEG, PNG, WebP, GIF, etc.). Pour de très grandes images (plusieurs dizaines de mégapixels), le calcul pixel par pixel peut prendre quelques secondes et consommer de la mémoire, puisque tout se fait localement dans l'onglet du navigateur.