Loading...
Loading...
Déposez deux images et révélez la différence avec un diviseur déplaçable, disposez-les côte à côte, ou faites fondre l'une sur l'autre — utile pour les revues de design, les passes de retouche et la photographie avant/après.
Un curseur de comparaison d'images vous permet de superposer deux images et de révéler l'une ou l'autre en déplaçant un diviseur à travers le cadre. C'est l'outil standard pour tout visuel 'avant vs. après' : passes de retouche photo, redesign d'une interface utilisateur, deux rendus de la même scène, deux étalonnages de couleur du même tir, construction A vs. construction B d'un modèle 3D. Le mode côte à côte montre les deux en même temps pour des comparaisons de proportions. Le mode superposition de fondu fait une transition entre les deux avec un curseur d'opacité, ce qui est utile pour repérer des décalages d'alignement subtils ou des différences de ton qu'un diviseur rigide cacherait. Tout se passe localement — les deux images restent sur votre appareil, la comparaison se fait dans le navigateur, et rien n'est téléchargé.
Déposez un fichier JPG, PNG, WebP, GIF, BMP ou AVIF dans l'emplacement Avant, ou cliquez pour choisir depuis votre appareil. L'image s'affiche dans le panneau et l'espace de travail apparaît en dessous.
Déposez la deuxième image dans l'emplacement Après. Pour de meilleurs résultats, les deux images doivent avoir les mêmes dimensions — le conteneur de comparaison se verrouille sur le rapport d'aspect de la première image que vous chargez.
Le mode Curseur superpose les deux images avec un diviseur déplaçable. Le mode Côte à côte les place dans deux colonnes. Le mode Superposition de fondu fait une transition entre elles avec un curseur d'opacité — utile pour repérer les dérives d'alignement.
En mode curseur, faites glisser n'importe où dans la zone de comparaison pour déplacer le diviseur. Changez le diviseur en vertical si vos images se comparent de haut en bas plutôt que de gauche à droite. En mode fondu, faites glisser le curseur d'opacité Après.
Utilisez Échanger pour inverser A et B sans re-télécharger. Réinitialiser efface les deux images et ramène l'espace de travail aux paramètres par défaut. Chargez de nouveaux fichiers à tout moment en les déposant sur l'emplacement — pas besoin de réinitialiser d'abord.
1. Les deux images s'affichent avec object-fit: contain à l'intérieur d'un conteneur à aspect verrouillé. 2. L'image Après se trouve dans un superposition positionnée absolument. 3. Un clip-path CSS : inset(0 [100 - position]% 0 0) révèle uniquement le côté gauche de la superposition. 4. Le mode vertical échange l'axe inset : clip-path: inset(0 0 [100 - position]% 0). 5. Les événements de pointeur mettent à jour la position à partir du décalage du curseur dans le rectangle de délimitation du conteneur. 6. Le mode de fondu saute le clip-path et anime simplement l'opacité de 0 à 1 sur l'image Après.
L'utilisation de clip-path maintient les deux images à pleine qualité sans ré-encodage de canevas — ce que vous voyez est le fichier source pixel par pixel, juste masqué. La gestion du glissement capture pointermove sur la fenêtre afin que le diviseur continue de suivre même si le curseur quitte la zone de comparaison en plein glissement. Le verrouillage du rapport d'aspect signifie que le conteneur s'adapte à la largeur de la page sans jamais déformer les images, et object-fit: contain gère gracieusement le cas où les deux images ont des dimensions légèrement différentes.
Référence : MDN — clip-path
| Cas d'utilisation | Meilleur mode |
|---|---|
Passage de retouche photo (peau, remplacement de ciel, étalonnage des couleurs) | Curseur — faites glisser le diviseur à travers le cadre pour repérer exactement où les modifications se trouvent. Gardez les deux fichiers aux mêmes dimensions afin que la ligne du diviseur reste significative. |
Refonte de site web — anciennes captures d'écran de mise en page vs. nouvelles captures d'écran de mise en page | Curseur pour les sections héro, côte à côte lorsque le défilement est important. Prenez les deux captures d'écran à la même largeur de fenêtre ou la comparaison ne sera pas équitable. |
Deux rendus de la même scène 3D avec un éclairage différent | Superposition de fondu — faites une transition entre elles pour repérer les dérives subtiles de GI ou d'ombre. Le mode de fondu est également excellent pour repérer où un débruiteur a changé des détails. |
Capture d'écran de rapport de bogue vs. sortie attendue | Côte à côte — les ingénieurs peuvent voir les deux en même temps sans faire défiler. Ajoutez le curseur en haut dans le fil de discussion du problème pour le moment de 'révélation'. |
Carte ou graphique avec deux états de données (mars vs. avril) | Curseur — balayez le graphique pour voir quelles régions ont changé. Le diviseur vertical fonctionne bien pour les cartes géographiques qui comparent le nord au sud. |
Découpez le sujet de n'importe quelle photo avec l'IA sur appareil — aucun téléchargement requis.
Réduisez les fichiers JPG, PNG ou WebP dans votre navigateur avec un curseur de qualité interactif.
Ajustez, filtrez, faites pivoter et recadrez des photos dans le navigateur — pas de téléchargements, pas de filigrane.
Composez des mèmes et des collages d'écran avec de vraies couches — collez, faites glisser, recadrez, légendez, exportez.
Dernière mise à jour :