Curseur de comparaison d’images

Comment fonctionne le curseur de comparaison d’images

Ce que fait l’outil

Le curseur de comparaison d’images superpose deux images et n’affiche que la partie que vous souhaitez voir en faisant glisser une poignée verticale. En le faisant glisser vers la gauche et la droite, une plus grande partie de l’image « avant » ou « après » est révélée, rendant immédiatement évidentes les différences visuelles côte à côte. Les tailles de fichier et le pourcentage de variation sont affichés afin que vous puissiez aussi voir l’impact au niveau des octets.

Cas d’usage courants pour les développeurs

Les ingénieurs qui vérifient une compression d’image avec perte comparent une version JPEG à une version WebP de la même source. Les designers examinent les changements de tone mapping, de retouche ou de correction colorimétrique entre une version brouillon et une version finale. Les ingénieurs ML/IA visualisent les résultats de super-résolution, de débruitage ou de transfert de style par rapport à leurs entrées. Les équipes marketing produisent des démos avant/après percutantes pour des pages d’atterrissage.

Formats de données, types ou variantes

Accepte tout format d’image que le navigateur peut afficher — PNG, JPEG, WebP, AVIF, GIF, SVG. Les images restent dans votre navigateur via des URL d’objet (URL.createObjectURL), donc rien n’est téléversé. Pour une comparaison la plus utile possible, les deux images doivent avoir des dimensions et un ratio d’aspect identiques ; si elles diffèrent, elles sont toutes deux rendues avec object-fit: contain afin qu’aucune ne soit rognée.

Pièges courants et cas limites

Comparer des images avec des ratios d’aspect différents produit des bandes de letterbox d’un côté. Les images très volumineuses (>50 MB) peuvent ralentir l’interaction de glisser-déposer dans les anciens navigateurs. Le curseur révèle l’intégralité de l’image « après » — si les deux fichiers ont de la transparence, placez le curseur sur une zone opaque, sinon vous verrez l’arrière-plan de la page transparaître à travers les deux volets.

Quand utiliser cet outil plutôt que du code

Utilisez l’outil du navigateur pour une comparaison ponctuelle pendant le développement ou pour des démos rapides aux parties prenantes. Sur des sites en production, intégrez des bibliothèques dédiées comme react-compare-slider ou img-comparison-slider pour l’accessibilité, le chargement différé et la prise en charge du SSR ; pour des contrôles qualité automatisés en lot sur des centaines d’images, utilisez des outils basés sur le SSIM/PSNR comme ImageMagick `compare` ou pixelmatch.