Comment choisir les bonnes images pour votre site web

Commencez par définir le rôle de l’image

Avant de choisir une photo, demandez-vous : « Que doit comprendre ou ressentir le visiteur à cet endroit de la page ? »

Une image d’accueil peut présenter votre entreprise. Une photo de service peut montrer votre travail ou son résultat. Une photo d’équipe aide les clients à reconnaître les personnes qu’ils rencontreront. Choisissez une image qui sert cet objectif.

Avant la recherche, résumez le besoin en une phrase : « Cette image doit montrer une petite salle de bains que nous avons rénovée et laisser de la place pour le titre à gauche. » Une consigne précise permet d’écarter de belles photos qui ne conviennent pas à la page.

Comparez les options avec trois questions : Que raconte cette image ? Cette information est-elle utile ici ? Reste-t-elle compréhensible dans l’espace disponible ? Si l’image n’apporte ni information utile ni ambiance adaptée, la section peut mieux fonctionner avec du texte seul.

Choisissez une image d’accueil adaptée à votre activité

Le grand bloc d’introduction, souvent appelé « hero », est la première zone que voient de nombreux visiteurs. Son image doit accompagner le titre, sans lui voler la vedette.

Une entreprise de rénovation pourrait montrer une pièce terminée ou un artisan au travail. Un cabinet de kinésithérapie pourrait utiliser une photo naturelle d’une consultation ou d’un exercice. Un café de quartier pourrait présenter sa salle ou un plat reconnaissable.

Gardez une zone suffisamment calme pour le titre et les boutons. Si l’image attire tellement l’attention que l’offre passe au second plan, choisissez une composition plus simple.

Évaluez l’image dans la mise en page réelle. Une excellente photo peut avoir un arrière-plan chargé précisément à l’emplacement du titre. Gardez le titre et le bouton sous forme de texte dans la page plutôt que de les intégrer à l’image : ils pourront ainsi s’adapter à la mise en page.

Exemple : comparer trois images pour la même page d’accueil

Imaginez une entreprise de rénovation dont le titre est « Rénovation de salles de bains pour petits logements ». Elle hésite entre trois photos :

• Une photo de banque d’images soignée d’une grande salle de bains luxueuse. La lumière est belle, mais la pièce ne représente pas les petits espaces que l’entreprise souhaite montrer. Elle risque de créer une attente inadaptée.
• Une photo d’une salle de bains rénovée par l’entreprise, avec un cadrage serré et du désordre visible. Le sujet convient, mais l’agencement est difficile à comprendre. Essayez un autre cadrage ou une autre photo du même projet.
• Une photo claire d’une petite salle de bains terminée. Les rangements, la douche et l’espace disponible se distinguent facilement. Si elle laisse aussi de la place au titre, c’est le meilleur choix pour cette page.

Si la douche disparaît de la troisième photo dans le recadrage mobile, préparez une version adaptée ou placez le texte à côté. Le sujet, le message et la mise en page finale doivent guider la décision ensemble.

Montrez le service ou son résultat

Les photos de services sont surtout utiles lorsqu’elles aident à se représenter le travail. Un plombier pourrait montrer une installation terminée ou un technicien chez un client. Un photographe pourrait présenter un véritable exemple de son travail. Ces images en disent plus qu’une photo générique de quelqu’un devant un ordinateur portable.

Choisissez la vue qui répond à la question probable du client. Une pièce terminée montre le résultat ; un gros plan révèle un raccord ou une finition ; une personne au travail illustre une étape. Ces vues ont des rôles différents : choisissez selon ce que la section doit expliquer.

Ajoutez une courte légende à la photo du projet pour identifier le travail et le détail à remarquer. « Rangements intégrés sous un plafond mansardé » en dit plus que « Encore un client satisfait ». Décrivez uniquement ce que le projet montre réellement et restez précis dans les affirmations sur la qualité ou les résultats.

Privilégiez des photos d’équipe naturelles

Une photo d’équipe peut rendre une petite entreprise plus accessible si elle montre les personnes que les clients rencontreront réellement. Un environnement de travail familier, des expressions naturelles et des poses détendues sont généralement plus convaincants qu’une photo de groupe très mise en scène.

Pour les portraits individuels, gardez des cadrages et des fonds similaires. Utilisez des photos récentes qui correspondent au service auquel les clients peuvent s’attendre.

Un nom et une fonction près du portrait permettent d’associer un visage à la personne qui répondra à une demande ou assurera un rendez-vous. Un portrait simple et bien éclairé peut suffire ; une séance sophistiquée n’est pas nécessaire. Demandez l’accord des personnes photographiées avant publication et évitez de laisser apparaître par inadvertance des clients ou des informations privées à l’arrière-plan.

Choisissez des images de blog en rapport avec l’article

Une image de blog doit aider à identifier le sujet, pas seulement occuper de l’espace. Pour un article sur les couleurs de peinture, une pièce montrant clairement un exemple de couleur peut être plus utile qu’une personne tenant un pinceau.

Un schéma simple, un exemple réel ou une photo de votre travail peut être plus pertinent qu’une image de stock. Adaptez le type d’image à l’explication : un comparatif peut nécessiter deux exemples côte à côte, un tutoriel une capture de l’étape précise. Une couverture décorative peut introduire le sujet, mais ne remplace pas les exemples nécessaires pour comprendre les instructions.

Vérifiez le recadrage sur ordinateur et sur mobile

Une image large peut être très différente sur téléphone. Le navigateur peut couper les côtés et faire disparaître une personne, un produit ou un détail important situé près du bord.

Prévisualisez l’image à sa taille d’affichage réelle. Vérifiez que le sujet principal reste visible sur les deux écrans. Si le texte est placé sur l’image, prévoyez une zone calme derrière lui pour faciliter la lecture. S’il n’y en a pas, placez le texte à côté.

1. Placez l’image dans la section où elle sera utilisée. Incluez le titre définitif, le bouton et le texte environnant au lieu d’examiner la photo seule.
2. Vérifiez la mise en page dans une vue large et une vue étroite. Repérez les visages coupés, les détails de produit manquants et le texte sur une zone chargée.
3. Ajustez le cadrage ou la position du sujet. Si votre éditeur propose un point focal, déplacez-le vers le détail important et vérifiez à nouveau.
4. Consultez la page sur un téléphone. Le sens de l’image et les indications essentielles doivent rester clairs à la taille affichée.

Si un seul cadrage ne convient pas aux deux tailles, le site peut avoir besoin de recadrages différents selon l’écran. Le guide MDN des images adaptatives explique cette approche, appelée « art direction », à la personne qui réalise votre page.

Utilisez les banques d’images avec discernement

Une photo de stock peut être utile si vous n’avez pas de photo adaptée parmi les vôtres. Avant de la choisir, demandez-vous :

• Est-elle clairement liée à cette entreprise ou à ce service ?
• Semble-t-elle naturelle et crédible ?
• Pourrait-elle figurer sur le site de presque n’importe quel concurrent ?

Si l’image semble interchangeable, cherchez une option plus précise ou utilisez une vraie photo de votre travail, de vos produits, de vos locaux ou de votre équipe. Ces photos aident les visiteurs à savoir à quoi s’attendre.

Une image de stock peut illustrer un sujet général ou créer une ambiance. Elle convient moins lorsqu’il s’agit de montrer votre véritable équipe, vos locaux ou vos réalisations. Ne la présentez pas comme la preuve d’un projet que vous avez réalisé. Une image de stock pertinente peut néanmoins être préférable à une photo que vous avez prise, mais qui est trop sombre, chargée ou peu claire.

Gardez une cohérence visuelle entre les images

Des images de sources différentes peuvent former un ensemble cohérent. Cherchez un point commun : lumière naturelle, palette similaire ou style photographique constant.

Il n’est pas nécessaire d’appliquer le même traitement à chaque photo. Visez une page harmonieuse où chaque image convient à sa section.

Commencez par deux ou trois règles simples : cadrages similaires pour les portraits, format constant pour les couvertures de blog et lumière naturelle pour les photos de projets. Examinez les images ensemble sur la page. Remplacez celle qui détonne avant d’appliquer un filtre marqué à toute la collection.

Vérifications avant publication

• Vous pouvez expliquer ce que l’image apporte à la section.
• Elle représente fidèlement l’entreprise, le sujet ou l’exemple présenté.
• Le sujet principal reste visible dans les mises en page réelles sur ordinateur et mobile.
• Le texte et les boutons restent lisibles, et les informations essentielles existent aussi dans le texte de la page.
• La lumière, le cadrage ou les couleurs s’accordent avec les images voisines.
• Vous avez vérifié l’autorisation d’utilisation et les éventuels crédits exigés par la source.

Préparez les images sélectionnées pour le site

Après la sélection, consultez nos guides pour choisir les bonnes dimensions, redimensionner sans déformer et rédiger des textes alternatifs et des noms de fichiers utiles.

Pensez aussi à transmettre l’information aux personnes qui ne voient pas l’image. Les images porteuses de sens nécessitent une alternative textuelle adaptée ; celles qui sont purement décoratives ont généralement un texte alternatif vide. Le tutoriel du W3C sur les images explique comment leur rôle détermine ce choix.