Comparateur d'images

Chargez deux images et comparez-les avec un curseur glissant ou en vue côte-à-côte. Idéal pour les retouches avant/après. Aucun upload.

Comment fonctionne Comparateur d'images

Curseur de comparaison d'images vous permet de charger deux images côte à côte et de faire glisser un séparateur vertical pour révéler plus d'une image et moins de l'autre. Cette mise en page avant-après est un moyen direct et peu contraignant de montrer la différence entre deux versions d'une image. Les deux images sont chargées depuis votre disque local via l'API File et rendues à l'écran par le navigateur ; rien n'est téléchargé sur un serveur.

Le curseur utilise une approche CSS clip-path pour que la transition entre les deux images soit toujours alignée au pixel et qu'il n'y ait ni mélange ni interpolation à la frontière. Vous pouvez aussi passer en vue écran partagé qui affiche les deux images dans des panneaux gauche et droit fixes. L'outil est utile pour comparer des retouches photo, des résultats de compression, des itérations de design ou deux images quelconques où vous devez voir clairement les différences.

Rédigé par Bastien Sulyan

Comment utiliser Comparateur d'images, étape par étape

Déposez la première image (la version 'avant') sur la zone de chargement gauche.
Déposez la deuxième image (la version 'après') sur la zone de chargement droite.
Faites glisser le séparateur à gauche et à droite pour révéler plus d'une image à la fois.
Passez en vue écran partagé pour voir les deux images dans des panneaux fixes si vous préférez une comparaison statique.
Utilisez le bouton plein écran pour maximiser la comparaison pour une inspection détaillée.

Cas d'utilisation courants

Un photographe compare l'export RAW original avec une version retouchée pour évaluer dans quelle mesure la retouche a changé l'image.
Un développeur vérifie une paire avant-après d'images compressées pour déterminer si la perte de qualité à un niveau de compression donné est acceptable.
Un designer UX présente une refonte d'interface en plaçant l'ancienne capture d'écran à gauche et la nouvelle à droite pour une revue avec les parties prenantes.
Un éditeur de contenu vérifie qu'une manipulation d'image (étalonnage des couleurs, recadrage) est cohérente entre une vignette et une version pleine taille.

Questions fréquentes

Les deux images doivent-elles avoir la même taille ?

L'outil fonctionne mieux quand les deux images ont les mêmes dimensions, car le curseur les superpose exactement. Si les images diffèrent en taille, l'outil les met à l'échelle à une taille d'affichage commune. Un léger désalignement peut apparaître aux bords si les formats sont différents.

Les images sont-elles envoyées quelque part pour que la comparaison fonctionne ?

Non. Les deux images sont chargées depuis votre système de fichiers via l'API File et dessinées dans des éléments Canvas dans votre navigateur. La comparaison est une opération de rendu côté client. Aucune image ne quitte votre appareil.

Puis-je comparer des images provenant de deux URL différentes plutôt que de fichiers locaux ?

L'outil actuel accepte uniquement les fichiers locaux. Charger des images depuis des URL distantes nécessiterait que le navigateur les récupère et serait soumis aux restrictions CORS que de nombreux hébergeurs d'images ne permettent pas.

Y a-t-il une taille maximale d'image que la comparaison peut gérer ?

La limite est la mémoire Canvas de votre navigateur. Les images jusqu'à environ 20 mégapixels chacune sont gérées sans problème sur la plupart des appareils de bureau. Les très grandes images peuvent ralentir le rendu ou provoquer une erreur de mémoire sur du matériel bas de gamme.

Puis-je enregistrer une capture d'écran d'une position spécifique du curseur ?

L'outil de capture d'écran de votre système d'exploitation (ou la fonctionnalité de capture du navigateur dans les DevTools) est le moyen simple de capturer une position particulière du curseur. La vue de comparaison elle-même n'a pas de bouton d'export intégré pour une image fusionnée.

Outils liés

Tout reste local, explorez des outils complémentaires.

Tous les outils image