Aller au contenu principalAller à la navigation
Boîte à Out's

Comparateur Avant / Après

Générateur gratuit de comparateur d'images Avant/Après. Créez des sliders interactifs avec recadrage et zoom au millimètre près. Intégration web et oEmbed.

Configuration

#3B82F6

Options Avancées

Note: Ces dimensions sont utilisées pour le ratio d'affichage et pour recadrer parfaitement les images uploadées.
Astuce : La configuration est automatiquement sauvegardée dans l'URL. Vous pouvez l'ajouter à vos favoris ou la partager pour la remodifier plus tard !
Avant
Après

Code d'Intégration (Iframe)

Copiez ce code HTML pour le coller sur votre site (WordPress, Shopify, Ghost, code source HTML). Le comparateur conservera vos paramètres exacts.

Taille du script auto-hébergé : 300 octets
<iframe src="https://www.boiteaouts.com/embed/avant-apres?mode=slider-horizontal&label1=Avant&label2=Apr%C3%A8s&color=%233B82F6&initialPosition=50&width=800&height=500&animateIntro=true" width="100%" frameborder="0" style="border:0; aspect-ratio: 800/500; max-width: 800px;" allowfullscreen></iframe>

oEmbed (Notion, WordPress, Discord…)

Collez simplement l'URL ci-dessous dans Notion, WordPress ou tout autre outil compatible oEmbed pour intégrer automatiquement votre comparateur.

💡 Astuce : Sur Notion, collez simplement l'URL directe de l'embed et sélectionnez "Créer un Embed". Sur WordPress, collez l'URL dans un bloc "HTML personnalisé" ou un bloc "Embed".

Sauvegarder / Restaurer

Sauvegardez votre configuration complète (y compris les images importées) dans un fichier JSON. Rechargez-le à tout moment pour retrouver votre projet tel quel.

Guide Explicatif SEO : Créer un Comparateur d'Images Avant / Après

Le comparateur d'images, aussi appelé slider avant/après, permet de montrer clairement l'évolution d'un projet. Il est utile pour illustrer une rénovation, une retouche photo, une restauration d'objet ou toute transformation visuelle qu'un simple côte-à-côte statique explique moins bien.

Pourquoi utiliser notre générateur de Slider Avant / Après ?

Notre outil propose plusieurs réglages utiles sans inscription et sans configuration complexe :

  • Sans inscription : vous pouvez créer plusieurs comparateurs et retrouver leur état directement dans l'URL partagée.
  • Technologie oEmbed & Iframe : Vous pouvez intégrer facilement votre comparateur sur n'importe quel CMS (WordPress, Webflow, Shopify) via le code HTML généré. Les plateformes compatibles oEmbed (Notion, Discord) sont également supportées.
  • Trois modes d'affichage : slider horizontal, slider vertical pour les portraits, et mode fondu pour comparer deux images de manière plus progressive.

💡 Astuce de Professionnel

Pour un rendu visuel optimal, assurez-vous de recadrer et redimensionner vos deux images avec exactement les mêmes proportions (ratio) avant de les utiliser. Utilisez des banques d'images ou votre propre hébergeur pour générer des URL publiques (ex: Imgur, Cloudinary).

À propos de Comparateur Avant / Après

Générateur gratuit de comparateur d'images Avant/Après. Créez des sliders interactifs avec recadrage et zoom au millimètre près. Intégration web et oEmbed. Cette page fait partie des outils utilitaires de Boîte À Out's, pensés pour obtenir un résultat rapide, gratuit et accessible depuis un navigateur moderne.

Méthode et transparence

Boîte À Out's publie des outils pratiques et documente ses hypothèses quand des données externes, des barèmes publics ou des règles métier sont impliqués. Dernière mise à jour connue de cette fiche : 28 mars 2026.

Lire notre méthodologieSignaler une correction

Questions Fréquentes

Quels sont les modes de comparaison disponibles ?

Nous proposons plusieurs modes innovants : le Slider Classique (horizontal et vertical), le mode Fondu (Fade) pour une transition douce, le mode Loupe (Magnifier) pour un effet de révélation magique, et même un mode exclusif 4 images contrôlé par un curseur 2D central !

Comment intégrer le comparateur sur mon site web ?

C'est très simple : configurez votre comparateur, puis copiez le code 'Iframe' fourni pour l'intégrer sur n'importe quel site HTML. Nous supportons également oEmbed, ce qui signifie que sur des plateformes comme Notion ou WordPress, il suffit de coller le lien généré pour que le widget s'affiche automatiquement.

Ai-je besoin de créer un compte pour sauvegarder mon comparateur ?

Non. L'outil ne s'appuie pas sur une base de données serveur pour conserver vos réglages. La configuration (images, couleurs, labels) est encodée directement dans l'URL, ce qui permet de sauvegarder ou partager un lien avec les mêmes paramètres.

Besoin d'aide supplémentaire ? Ces réponses ne couvrent pas votre question ? N'hésitez pas à nous contacter.

🛡️Outil gratuit et fiable

✓100% gratuit, sans inscription requise
✓Confidentialité prise en compte dès la conception
✓Résultats rapides directement dans l'interface
✓Compatible tous appareils et navigateurs

Note : Vos saisies servent uniquement à produire le résultat demandé. Selon l'outil, certains calculs restent dans votre navigateur et certaines données publiques peuvent être demandées via une API limitée au strict nécessaire.

Ces outils pourraient aussi vous intéresser

Détourage Objet & Portrait

Détourage Objet & Portrait

Supprimez l'arrière-plan de vos photos grâce à cet outil gratuit. Traitement local dans le navigateur lorsque votre appareil le permet.

Populaire

Calendrier Chinois & BaZi

Calendrier Chinois & BaZi

Découvrez votre signe lunaire et vos 4 Piliers (BaZi). Outil en ligne gratuit basé sur l'ancien almanach asiatique traditionnel.

Populaire

Comparateur de Tailles d'Écrans

Comparateur de Tailles d'Écrans

Analysez visuellement la taille idéale de n'importe quel écran (TV, PC) par rapport à votre distance de recul exacte grâce au simulateur 3D.

Populaire