Aller au contenu principalAller à la navigation
Boîte à Out's
Comparateur Avant / Après - illustration de l'outil

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 télécharger une sauvegarde JSON. Le lien partageable conserve les réglages et les URL publiques, mais pas les images importées depuis votre appareil.
  • 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.

Questions Fréquentes

Quels sont les modes de comparaison disponibles ?

L'outil propose trois modes pour deux images : un curseur horizontal, un curseur vertical et un fondu progressif.

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. Vous pouvez télécharger une sauvegarde JSON. Un lien partageable conserve les réglages et les URL d'images publiques, mais pas les images importées depuis votre appareil.

Une question reste sans réponse ? Nous contacter.

Outil gratuit et fiable

L'essentiel, sans inscription.

  • 100% gratuit, sans inscription requise
  • Confidentialité prise en compte dès la conception
  • Résultats rapides directement dans l’interface
  • Interface responsive sur navigateurs modernes

Vos données : elles 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

Comparateur taille et distance de recul TV

Comparateur taille et distance de recul TV

Comparez les dimensions réelles de deux écrans et estimez une distance de recul pour une TV 43, 55, 65 ou 75 pouces avec la vue 3D.

Populaire

Comparateur de Mac

Comparateur de Mac

Comparez les modèles de Mac, leurs puces Apple Silicon, la RAM, le stockage et les prix pour choisir la configuration adaptée.

Populaire