Visualiseur de différences d'images

Quatre façons de comparer

• Côte à côte — la vérification la plus simple : les deux images affichées en pleine taille l'une à côté de l'autre.
• Curseur — un séparateur déplaçable révèle l'ancienne image d'un côté et la nouvelle de l'autre, idéal pour les changements d'interface avant/après.
• Peau d'oignon — superpose la seconde image sur la première avec une opacité réglable, parfait pour repérer les décalages et la dérive d'alignement.
• Diff par pixel — compare chaque pixel et peint en rouge ceux qui ont changé, si bien qu'un changement d'un seul pixel est impossible à manquer.

La métrique de la diff par pixel

Au lieu d'une soustraction RGB naïve, le mode diff par pixel utilise une métrique de distance de couleur YIQ — la même approche que la populaire bibliothèque pixelmatch. YIQ sépare la luminance (Y) de la chrominance (I, Q), ce qui correspond à la façon dont l'œil humain perçoit la différence. Un seul curseur de seuil contrôle l'ampleur de la différence nécessaire avant qu'un pixel soit signalé.

Scénarios courants

1. Tests de régression d'interface — comparez une capture avant et après un changement de code.
2. Revue de conception — vérifiez qu'une construction du développeur correspond au modèle.
3. QA de compression d'image — voyez exactement quelles régions un encodeur a modifiées.
4. Retouches photo — confirmez quels pixels une retouche a touchés.

Tout s'exécute via l'API Canvas dans votre navigateur — aucun téléversement, aucune attente.