Comment ajouter des photos avant/après à votre site internet

Si vous refaites des toitures, remettez en état des sous-sols inondés, retapissez des intérieurs ou gérez un espace de bien-être, votre travail terminé est votre meilleur commercial. Un visiteur qui peut voir une gouttière affaissée devenir une ligne droite et nette, ou un plafond taché redevenir blanc et brillant, n'a pas besoin d'un paragraphe de texte pour vous croire. C'est pourquoi ajouter des photos avant/après à votre site internet est l'une des heures les mieux investies dans votre présence en ligne.

La plupart des guides sur ce sujet sautent directement à un plugin WordPress et s'arrêtent là. Celui-ci commence plus tôt, par la partie qui décide vraiment si les photos fonctionnent : photographier des paires correspondantes, les organiser, choisir comment les afficher, et les rendre rapides et trouvables. Que vous utilisiez un plugin, un constructeur ou un outil clé en main, les fondamentaux ci-dessous sont les mêmes.

Pourquoi les photos avant/après convertissent si bien

Les gens font confiance à ce qu'ils peuvent vérifier. Une affirmation écrite comme « nous livrons un travail de qualité » demande au lecteur de vous croire sur parole. Une image côte à côte lui permet de juger par lui-même en environ une seconde. Ce changement - passer de demander de la confiance à laisser quelqu'un vérifier - est toute la raison pour laquelle ces photos portent leur poids.

Elles font aussi un travail plus discret. Une paire forte établit les attentes. Quelqu'un qui voit la qualité de votre travail terminé avant d'appeler est un prospect plus chaud et mieux qualifié. Il ne fait plus que comparer les prix. Il s'imagine ce résultat chez lui.

Étape 1 : Photographier des paires qu'on peut vraiment comparer

La plus grande erreur est de traiter l'« avant » comme une pensée secondaire. Vous vous souvenez de photographier le chantier terminé, mais le seul « avant » que vous avez est une photo floue prise sous une mauvaise lumière depuis un angle différent. La paire ne s'aligne pas, et la comparaison s'effondre.

La cohérence est ce qui rend un avant/après crédible. Visez ces points à chaque fois :

Le même angle et la même distance. Tenez-vous au même endroit pour les deux prises. Notez un repère, comme un coin de l'allée ou une dalle de sol, pour pouvoir y revenir. Un trépied avec un petit marqueur au sol rend ça répétable.
Le même cadrage. Gardez la même quantité de scène dans le champ de vision. Si l'« avant » montre toute la toiture et l'« après » montre un coin, l'oeil ne peut pas les relier.
Le même éclairage. Photographiez à une heure similaire de la journée, ou utilisez la même lampe de travail. Des ombres de milieu de journée intenses sur une photo et une lumière douce de soirée sur l'autre font paraître un résultat honnête comme mis en scène.
La même orientation. Les deux photos en paysage, ou les deux en portrait. Les mélanger force le recadrage d'une image et fausse l'alignement.
Stable et net. Essuyez l'objectif, appuyez pour faire la mise au point et tenez-vous immobile. Un avant net face à un après net traduit un travail soigné.

Une bonne habitude : prenez l'« avant » dès votre arrivée sur le chantier, avant de toucher quoi que ce soit. Faites-en une partie de votre routine de démarrage, au même titre que l'installation des protections. Vous ne perdrez plus jamais une belle étude de cas parce que vous avez oublié le point de départ.

La paire de photos n'est pas de la décoration. C'est une preuve. Photographiez l'« avant » comme si ça comptait, parce que sur votre site, ça compte.

Étape 2 : Ne pas trop retoucher

Un peu de luminosité et de redressement, c'est bien. Les filtres lourds, les boosts de saturation ou tout ce qui change le résultat réel franchit une ligne. Les acheteurs ont vu assez de fausses transformations pour être méfiants, et une photo qui semble trop belle pour être vraie leur fait douter de toutes les autres.

Retouchez les deux images de la même façon. Si vous éclaircissez l'après, éclaircissez l'avant du même montant. L'objectif est une comparaison précise, pas un concours de beauté. Honnête et clair bat dramatique et douteux à chaque fois.

Étape 3 : Obtenir la permission avant toute publication

Cette étape est sautée et ne devrait pas l'être. Si le travail se trouve sur la propriété de quelqu'un, ou si la photo montre l'intérieur d'un domicile, un corps, un visage ou quelque chose d'identifiable, demandez avant de publier. Pour les services à domicile, une ligne rapide sur votre bon de travail ou un SMS de suivi suffit : « Puis-je utiliser des photos du chantier terminé sur notre site et nos réseaux sociaux ? » Pour le bien-être, la santé ou tout ce qui est personnel, obtenez-le par écrit, et traitez un oui verbal comme insuffisant.

Le cadrage aide. La plupart des clients sont heureux qu'on les mette en valeur quand vous le présentez comme de la fierté dans le résultat plutôt que comme une faveur que vous demandez. Gardez un relevé simple de qui a dit oui pour ne jamais avoir à deviner plus tard.

Étape 4 : Choisir comment les photos seront affichées

Il y a trois façons courantes de montrer une paire, et la bonne dépend du travail et de l'appareil.

Slider interactif. Une seule image avec une poignée au milieu que le visiteur fait glisser à gauche et à droite pour révéler l'avant et l'après. C'est engageant et fonctionne magnifiquement quand les deux photos s'alignent presque parfaitement, comme le même mur ou la même ligne de toit. Ça demande des paires bien correspondantes, sinon le glissement semble décalé.
Paire côte à côte. Deux images l'une à côté de l'autre avec des étiquettes claires. Plus simple, plus rapide à charger et indulgent quand les angles ne correspondent pas parfaitement. Sur un téléphone, les deux images s'empilent généralement, alors assurez-vous que chacune se lit bien sur un petit écran.
Grille ou galerie. Un ensemble de paires sur une page dédiée de résultats ou de galerie. C'est là que vous construisez un corpus de preuves au fil du temps. Groupez par type de chantier pour qu'un prospect en couverture voie de la couverture et un prospect en chauffage voie du chauffage.

Si vous débutez, les paires côte à côte sont le choix sûr. Elles sont faciles à bien faire, se chargent rapidement et ne laissent jamais un visiteur confus sur quelle image est laquelle. Ajoutez un slider plus tard pour vos paires les mieux correspondantes.

Étape 5 : Étiqueter chaque paire

Une comparaison sans étiquette fait travailler le visiteur, et les visiteurs confus partent. Marquez quelle image est l'avant et laquelle est l'après, et ajoutez une ligne de contexte.

Les étiquettes spécifiques battent les génériques. « Avant » et « Après » est le minimum. « Dégâts de tempête, réparés en un jour » ou « Extraction d'eau et remise en état complète, trois jours » raconte une histoire et répond à la question qui se forme dans l'esprit du lecteur : combien de temps, quelle perturbation, qu'est-ce qui a exactement changé. Une courte légende est souvent la différence entre une belle photo et une photo qui décroche un appel.

Étape 6 : Optimiser les images pour que la page reste rapide

Les gros fichiers image sont le tueur silencieux de ces pages. Une galerie pleine de photos directement depuis un téléphone peut peser des dizaines de mégaoctets, et sur une connexion téléphonique cette page peut prendre plusieurs secondes à apparaître. Beaucoup de visiteurs partent avant de jamais voir votre travail. La vitesse compte aussi pour le référencement.

Faites ça avant de télécharger :

Redimensionnez. Vous avez rarement besoin d'une image plus large qu'environ 2000 pixels pour le web. Réduisez d'abord les dimensions.
Compressez. Faites passer les photos dans un compresseur gratuit, ou exportez dans un format moderne comme WebP. Vous pouvez généralement réduire la taille du fichier de moitié ou plus sans baisse visible de qualité.
Visez petit. Une seule photo web sous environ 300 kilo-octets est un bon objectif. Plus léger est mieux, tant que ça reste net.
Chargement paresseux. La plupart des sites modernes et des constructeurs chargent les images seulement quand le visiteur fait défiler jusqu'à elles. Si le vôtre le propose, activez-le pour que le haut de la page apparaisse en moins de 3 secondes.

Étape 7 : Écrire le texte alternatif de chaque image

Le texte alternatif est la courte description écrite attachée à une image. Il compte pour deux raisons. C'est ce qu'un lecteur d'écran annonce à un visiteur qui ne peut pas voir la photo, donc c'est une exigence d'accessibilité de base. Et c'est l'une des façons dont les moteurs de recherche comprennent vos images, ce qui peut vous apporter du trafic depuis la recherche d'images.

Écrivez-le simplement et décrivez ce qui est montré. Quelque chose comme « avant et après d'une toiture en ardoise couverte de mousse, nettoyée jusqu'aux tuiles nettes » fait l'affaire. Évitez le bourrage de mots-clés. Une phrase honnête par image suffit. Faites-le pour l'avant et pour l'après.

Étape 8 : Placer les paires là où les décisions se prennent

Une page de galerie, c'est bien, mais les emplacements à plus grande valeur sont les pages où quelqu'un est sur le point d'appeler. Déposez une paire pertinente sur votre page d'accueil près de votre appel à l'action principal, et sur chaque page de prestation individuelle. Un visiteur qui lit votre page de remplacement de toiture devrait voir un résultat de remplacement de toiture là, et ne pas avoir à chercher une galerie séparée.

Renouvelez l'ensemble au fur et à mesure que vous terminez de nouveaux chantiers. Une section de résultats qui grandit visiblement dit aux visiteurs que vous êtes actif et régulier, ce qui est en soi une preuve discrète.

Les erreurs courantes à éviter

N'avoir qu'un « après » sans « avant » correspondant.
Angle, zoom ou éclairage différents entre les deux prises.
Publier la maison ou le visage d'un client sans demander.
De gros fichiers qui font ramper la page sur un téléphone.
Pas d'étiquettes, le visiteur ne sait pas quelle image est laquelle.
Une seule paire dramatique et rien d'autre, ce qui semble être un coup de chance plutôt qu'un standard.

Si vous préférez simplement le décrire et que ce soit fait

Tout ce qui précède suppose que vous placez les images, réglez le slider, redimensionnez les fichiers et écrivez le texte alternatif vous-même. C'est tout à fait faisable, et pour beaucoup de propriétaires un plugin ou un constructeur gère ça bien. Mais c'est aussi une soirée que vous n'avez peut-être pas.

C'est la partie que Saynovo est conçu pour supprimer. Au lieu de se battre avec un plugin, vous dites à votre site ce que vous voulez en langage courant - quelque chose d'aussi simple que « ajoute une section avant/après à ma page de couverture avec ces deux photos » - et le changement se produit. Votre site est généré à partir de vos informations d'établissement existantes, et les modifications se font en lui parlant plutôt qu'en apprenant un éditeur. Si gérer les images, les étiquettes et la mise en page vous-même vous semble une tâche de trop, avoir le site le faire sur demande vaut le coup d'oeil sur saynovo.com.

Les photos avant/après sur votre site : la version courte

La mécanique est simple une fois les bases solides. Photographiez des paires correspondantes avec le même angle et le même éclairage, gardez la retouche honnête, obtenez la permission, étiquetez chaque paire avec un vrai contexte, compressez les fichiers, écrivez le texte alternatif, et placez les résultats sur les pages où les gens décident d'appeler. Faites ça bien et la méthode d'affichage - slider, côte à côte ou galerie - n'est que le détail simple. Votre travail terminé se chargera de vendre, ce qui est exactement ce qu'il devrait faire.