Comment faire un avant/après sur son blog pour comparer deux photos ?

Comment faire un avant/après sur son site pour comparer deux photos ?



Vous avez sûrement déjà rencontré des avant/après sur le web ! Montrer une pièce avant et après les travaux, un visage avant et après maquillage, une photo avant et après retouche, son corps avant et après une transformation physique… Mais comment faire un avant/après facilement sur son blog ?

Dans ce tutoriel, je vais vous montrer comment utiliser JuxtaposeJS, un outil en ligne très facile à prendre en main pour créer un avant/après sur un site.

Préparer ses photos avant/après

La réussite d’un bon avant/après dépend en partie du choix des photos !

Prendre la bonne photo

Les avant/après qui ont le plus d’impact sont souvent ceux où les photos sont prises sous le même angle.

Par exemple, si vous voulez montrer un visage avant et après maquillage, il est préférable de faire la photo en adoptant la même expression, avec la même luminosité et le même angle. Ainsi, les différences entre les deux photos ressortiront d’autant plus.

Même chose pour un lieu, vous pouvez tout à fait utiliser un trépied pour prendre la photo au même endroit à deux moments différents.

Une fois que vous avez retenu deux photos similaires, nous allons les mettre en ligne.

Mettre en ligne ses photos

JuxtaposeJS, l’outil que nous allons utiliser, a besoin de récupérer le lien de vos photos. Il peut le faire soit à partir de Dropbox si vous possédez un compte et que votre photo est stockée sur Dropbox, soit à partir d’un site web.

Sur WordPress, allez dans le menu Médias > Ajouter et envoyez vos deux photos.

Mettre en ligne une image sur WordPress
Mettre en ligne une image sur WordPress

Je vous conseille de cliquer ensuite sur le lien « Modifier » de chaque photo et de renseigner son titre et le champ « Texte alternatif » avec une description de l’image.

Dans la colonne de droite, vous trouverez le lien de la photo. Copiez le lien des deux photos et gardez-le de côté (sur le Bloc-Notes par exemple).

Lien d'une image sur WordPress
Lien d’une image sur WordPress

Si vous avez un blog sur Blogger, allez dans la rubrique « Articles », appuyez sur le bouton « + » pour créer un nouvel article puis cliquez sur « Insérer une image ». Choisissez ensuite « importer à partir de l’ordinateur » et mettez en ligne vos deux images.

Importer une image sur Blogger
Importer une image sur Blogger

Elles vont automatiquement s’insérer dans l’article. Cliquez sur chaque image, choisissez « modifier » puis réglez la taille de l’image sur « Taille d’origine ». Allez ensuite dans l’éditeur HTML en cliquant sur le bouton « Affichage HTML » en haut à droite de l’écran.

Affichage HTML sur Blogger
Affichage HTML sur Blogger

Copiez le lien des deux images :

  • Il est situé juste après une partie intitulée « src= »
  • Il commence par https et se termine par .jpg si vos images sont au format JPG

Nous sommes maintenant prêts à passer à la création du avant/après proprement dit !


JuxtaposeJS, un outil gratuit pour faire un avant/après

Le fonctionnement de JuxtaposeJS est très simple. Sur le site, vous commencez par copier à gauche le lien de l’image représentant la situation « Avant » et, à droite, le lien de l’image correspondant à « Après », comme ceci :

Photos avant et après sur JuxtaposeJS
Photos avant et après sur JuxtaposeJS

Vous pouvez ensuite, pour chaque image, indiquer une légende, comme une date par exemple (« Label »), ainsi qu’un crédit.

Puis vous pouvez personnaliser votre avant/après avec plusieurs options :

  • Slider start position – C’est la répartition en pourcentage entre les deux photos. Si vous laissez à 50%, on verra la moitié de la photo Avant et la moitié de la photo Après.
  • Show Labels & Show Credits – Ces options permettent d’afficher ou non votre légende et le crédit des deux photos.
  • Animate – Cette option permet d’animer automatiquement l’avant-après.
  • Make Responsive – Je vous conseille de cocher cette case qui permet à votre avant/après de s’adapter aux smartphones et tablettes.
  • Vertical – Si votre photo exige un avant/après vertical, vous pouvez cocher cette case pour l’obtenir.

Vous pouvez prévisualiser en temps réel le rendu de votre slider avant/après.

Options de JuxtaposeJS
Options de JuxtaposeJS

Une fois que vous êtes prêt, cliquez sur « Publish » pour récupérer le code du slider.

Publier votre avant/après sur votre blog

Pour publier votre avant/après sur votre blog, il faut simplement copier le code figurant dans la zone « Embed » de JuxtaposeJS :

Code du slider avant-après sur JuxtaposeJS
Code du slider avant-après sur JuxtaposeJS

Quand vous rédigez votre article, basculez dans l’éditeur HTML. Sur Blogger, je vous ai montré un peu plus haut comme faire.

Sur WordPress, ça se passe au niveau de ce bouton si vous utilisez l’éditeur classique :

WordPress éditeur texte HTML
WordPress éditeur texte HTML

Et si vous utilisez l’éditeur Gutenberg de WordPress, il faudra cliquer sur les trois points en haut à droite de l’écran puis choisir « Éditeur de code » dans le menu.

Éditeur de code sur Gutenberg de WordPress
Éditeur de code sur Gutenberg de WordPress

A l’endroit où vous souhaitez que votre avant-après apparaisse, copiez le code issu de JuxtaposeJS.

Précision utile pour les utilisateurs de Blogger : si vous faites un « Aperçu » de votre article, l’avant-après ne fonctionnera pas dans l’aperçu… mais une fois qu’on publie, il marche sans problème sur le blog.

Voici le rendu, j’ai utilisé pour tester l’outil une photo de Winchester en Angleterre… avant et après retouche :

Les avant/après ont donné lieu à des projets très créatifs, à l’instar du Back To The Future d’Irina Werning, qui poussait des adultes à recréer leurs photos d’enfance. A vous d’imaginer votre vision des choses !


Poster un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Lorsque vous postez un commentaire sur le blog, le nom indiqué dans la case "Prénom" ainsi que votre message apparaîtront publiquement. Votre adresse e-mail restera confidentielle.

9 commentaires sur “Comment faire un avant/après sur son site pour comparer deux photos ?

  • anne-lise

    Bonjour ! Comment le rendre visible sur mobile comme votre exemple ? Je l’ai fait pour le site d’un client, pc nickel mais tablette et mobile illisible !! Une astuce ? Merci ! Anne-Lise.

    Répondre à anne-lise
    • Marlène

      Hello Anne-Lise, de manière générale sur un petit écran on manque pas mal d’espace pour que ça rende « bien »… mais pour que ce soit compatible mobile, ça passe par le code CSS (faire en sorte que l’iframe occupe 100% de la largeur de l’écran), cf ces explications techniques.

      Répondre à Marlène
  • Christèle

    Bonjour, j’ai une question, si on fait « Publier » sur Juxtapose, est-ce que ça veut dire que mes deux photos vont traîner sur leur site quelque-part ? Je veux montrer un avant-après de son bébé à une cliente, mais je veux que ça reste privé.

    Répondre à Christèle
    • Marlène

      Hello Christèle, concrètement, le lien des images n’est pas hébergé sur JuxtaposeJS mais bien sur le site WordPress (ou l’endroit que vous choisissez). Si vous voulez être totalement certaine que ça ne risque pas d’être référencé quelque part, je vous conseille de les contacter pour poser la question, au moins vous serez rassurée :)

      Répondre à Marlène
  • Christèle

    Merci pour ce fantastique article.
    J’ai fait un avant-après sur JuxtaposeJS, et maintenant je souhaite que mon client puisse le voir. Donc si j’ai bien compris, il faut que je le publie sur mon site wordpress, par exemple dans un nouvel article qui n’apparaît pas sur mes pages mais dont je pourrai envoyer le lien à mon client c’est bien ça ?

    Répondre à Christèle
  • Delphine

    Bonjour Marlène,
    Merci pour votre article, c’est exactement ce que je cherchais, mais j’ai beau copié mes lien URL de ma bibiothèque Worpress, rien ne s’affiche. Y a t’il une autre manip à faire ? Ou peut-être que cela ne fonctionne plus ? Si vous avez une piste je suis preneuse, merci bien

    Répondre à Delphine
    • Marlène

      Hello Delphine, « rien ne s’affiche » à quel niveau ? L’outil fonctionne toujours.

      Répondre à Marlène
  • Amandine / Drawings and things

    Ah ça peut me servir ça pour des dessins !
    Merci pour l’astuce !

    Répondre à Amandine
    • Marlène

      Oui, ça peut être top pour montrer par exemple un dessin avant/après colorisation, la progression entre croquis initial et dessin final… Il y a plein d’idées à explorer !

      Répondre à Marlène


Si vous aimez les articles du site, n'hésitez pas à faire vos achats sur Amazon.fr via ce lien ; il me permettra de toucher une commission grâce au programme Partenaires Amazon EU.