Image / Atelier photo
Curseur avant-après
Créez une comparaison avant/après avec des libellés modifiables et un curseur en direct. Téléchargez un fichier HTML portable intégrant les deux images, une transition animée en GIF ou une vidéo WebM lorsque ce format est pris en charge.
Curseur avant-après: Utilise les proportions de l’image avant et recadre l’image après au centre pour l’adapter. Le fichier HTML téléchargé contient les deux images PNG sous forme d’URI de données ainsi que son propre curseur de plage accessible au clavier. Les transitions GIF tiennent dans un cadre de 480 × 480 pixels ; les transitions WebM sont enregistrées pendant environ 2 secondes lorsque l’enregistrement dans le navigateur est disponible. Fonctionne 100 % localement dans votre navigateur, sans aucun téléversement de fichier vers le serveur.
- Catégorie
- Outils image
- Exécutions
- Dans votre navigateur
- Coût
- Gratuit · sans inscription
- Disponibilité
- Prêt à l'emploi
Fonctionne entièrement dans votre navigateur
Comparaison en direct
Choisissez les deux photos pour les comparer.
L’enregistrement WebM n’est pas disponible dans ce navigateur. Téléchargez plutôt le fondu GIF.
Comparaison à emporter
Les deux images sont normalisées aux mêmes proportions et intégrées au HTML sous forme d’URI de données PNG. Un champ natif de type range contrôle la zone visible de l’image après et prend en charge les flèches du clavier. Le fichier contient du JavaScript intégré, que des politiques d’hébergement restrictives peuvent bloquer.
Exports animés
La disponibilité de WebM est vérifiée avant l’enregistrement. GIF est utilisé comme solution de repli lorsque WebM ou la capture du canvas n’est pas disponible. Vérification de la prise en charge de MediaRecorder : https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/isTypeSupported_static
Comment l'utiliser
- Sélectionnez les photos avant et après.
- Ajoutez des libellés et déplacez le curseur de comparaison.
- Téléchargez un fichier HTML pour obtenir un curseur interactif, ou un GIF ou WebM compatible pour créer une transition animée.
Confidentialité et limitations
Vos données et vos images restent dans votre navigateur. Rien n’est envoyé.
Outils associés
Questions fréquentes
Le fichier HTML fonctionne-t-il hors connexion ?
Oui. Il contient les deux images et le code du curseur dans un seul fichier, sans requête externe.
Pourquoi WebM est-il désactivé ?
Le navigateur doit prendre en charge l’enregistrement WebM et la capture du canvas. Lorsque ces fonctions ne sont pas disponibles, utilisez la transition GIF.
Quelle est la différence avec le curseur de comparaison d’images ?
Cette page exporte un curseur HTML fonctionnel et des transitions animées. Le curseur de comparaison d’images exporte un PNG statique, avec notamment des mises en page côte à côte.
Outil gratuit · dans votre navigateur exécutions · aucun compte requis