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, appuyez sur le bouton « Nouvel article » puis sur « Insérer une image » et mettez en ligne vos deux images.

Importer une image sur Blogger
Importer une image sur Blogger

Insérez-les ensuite dans votre article en choisissant l’option « Taille originale ». Allez ensuite dans l’éditeur HTML en cliquant sur le bouton.

Editeur visuel et éditeur HTML
Editeur visuel et éditeur HTML

Copiez le lien des deux images (qui 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 et sur WordPress, ça se passe au niveau de ce bouton :

WordPress éditeur texte HTML
WordPress éditeur texte HTML

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 !

Thèmes : Blogger Photo WordPress 

Poster un commentaire

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

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

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.