Prenez n'importe quel site qui vous a perdu dès les premières secondes et remontez tout en haut de la page. Il y a de fortes chances que les images y soient pour quelque chose. Une photo d'illustration d'inconnus souriants qui ne ressemblent en rien aux personnes que cette entreprise sert vraiment. Une image d'en-tête si vague qu'elle pourrait appartenir à n'importe quelle entreprise de n'importe quel secteur. Ou pas d'images du tout, ce qui donne à la page un air nu et inachevé. Les images d'un site ne sont pas de la décoration. Elles communiquent. Cet article explique ce que font vraiment les images d'un site, comment choisir les bonnes, où les placer sur chaque page et ce qui se passe quand on se trompe.
Les visiteurs traitent les images plus vite que les mots. Avant que quiconque lise votre titre, son cerveau s'est déjà fait une première impression à partir du visuel. Vos images plaident donc pour votre entreprise avant que vous ayez eu l'occasion de le faire vous-même. La question est de savoir si ce plaidoyer est bien celui que vous voulez faire.
Que font vraiment les images d'un site ?
Chaque image de votre site dit quelque chose au visiteur. L'image d'en-tête de votre page d'accueil dit "voici le genre d'entreprise que nous sommes et voici pour qui nous travaillons". La photo de votre page À propos dit "il y a de vraies personnes ici". La photo produit de votre page de service dit "voici ce que vous obtenez en travaillant avec nous".
Quand ces signaux sont clairs et pertinents, les visiteurs se sentent orientés. Quand ils sont vagues ou génériques, les visiteurs ne ressentent rien, ce qui est le pire résultat. Un visiteur qui ne ressent rien n'a aucune raison de continuer à lire.
Les images guident aussi le regard. C'est le cœur de la hiérarchie visuelle d'une page. Une image bien placée attire l'attention vers la section qui compte. Une image mal placée divise l'attention et laisse le visiteur incertain sur où regarder ensuite. Chaque image doit mériter sa position en aidant le visiteur à avancer dans la bonne direction.
Vraies photos ou photos d'illustration : cela compte-t-il ?
Oui. Plus que ce que la plupart des gens imaginent.
Les visiteurs repèrent mieux les photos d'illustration qu'il y a cinq ans. La salle de réunion parfaitement éclairée avec quatre professionnels divers qui hochent la tête devant un ordinateur portable. La poignée de main devant une ligne d'horizon urbaine. La femme souriante qui tient une tasse de café. Ces images sont si courantes que les visiteurs ont développé une sorte d'immunité visuelle. Ils les voient et n'enregistrent rien.
Les vraies photos font l'inverse. Une photo de votre vraie devanture, de votre vraie équipe, de votre vrai travail terminé. Ces images sont propres à vous et à vous seul. Un visiteur qui les voit obtient la preuve qu'une vraie entreprise existe derrière le site, ce qui est l'une des choses les plus précieuses qu'une image puisse communiquer. Même une photo prise au téléphone avec une bonne lumière est souvent plus efficace qu'une photo d'illustration léchée, parce qu'elle est réelle.
Cela dit, les photos d'illustration ont leur place. Pour les articles de blog, pour illustrer des concepts abstraits, pour remplir des emplacements d'image secondaires où la précision compte moins, une photo d'illustration bien choisie fait l'affaire. La règle : utilisez de vraies photos là où la confiance est en jeu, et des photos d'illustration là où l'image ne fait que soutenir le contenu sans rien affirmer sur votre entreprise.
Comment choisir la bonne image pour chaque page ?
Avant de chercher une image, demandez-vous quel rôle elle doit jouer sur cette page précise.
Sur votre page d'accueil, l'image d'en-tête doit communiquer ce que vous faites et pour qui avant que quiconque lise un mot. Si un visiteur pouvait regarder votre image d'en-tête seule sans avoir aucune idée de votre secteur, l'image ne fait pas son travail.
Sur votre page À propos, l'image doit être personnelle. Montrez les personnes. Montrez le lieu. Montrez quelque chose qui rend l'entreprise humaine et précise plutôt qu'institutionnelle et anonyme.
Sur une page de service ou de produit, montrez le résultat. Un avant-après pour une entreprise de rénovation. Une capture du tableau de bord pour un logiciel. Une photo du plat terminé pour un traiteur. Les images de résultat sont plus persuasives que les images de processus, car elles répondent à la question que le visiteur se pose vraiment : qu'aurai-je quand ce sera fait ?
Une fois le rôle connu, vous cherchez l'image. Pas l'inverse.
Qu'est-ce qui fait qu'une image joue contre vous ?
Le manque de pertinence
Une image qui n'a rien de précis à dire sur votre entreprise, votre service ou votre client indique au visiteur que personne n'a réfléchi avec soin à l'expérience visuelle du site. Cette impression reste.
Le décalage
Si votre texte est chaleureux et conversationnel mais que vos images sont froides et institutionnelles, la page paraît incohérente. Les visiteurs perçoivent cette dissonance même quand ils ne savent pas la nommer. L'ambiance des images et celle du texte doivent s'accorder.
Les temps de chargement lents
Les grandes images non compressées sont la raison la plus courante de la lenteur des sites. Une page qui met plus de trois secondes à se charger sur un téléphone perd une part importante de ses visiteurs avant que quoi que ce soit soit vu. Chaque image que vous importez doit être compressée pour le web. La plupart des plateformes de sites en gèrent une partie automatiquement, mais il vaut mieux savoir ce que vous importez. Voyez comment la vitesse d'un site web influence les visiteurs et le classement dans la recherche pour avoir le tableau complet.
Le texte alternatif manquant
Chaque image de votre site a besoin d'une courte description de ce qu'elle montre, rédigée dans le champ de texte alternatif (alt). C'est important pour deux raisons. Les visiteurs qui utilisent un lecteur d'écran s'appuient sur le texte alternatif pour comprendre ce que contient une image. Les moteurs de recherche utilisent le texte alternatif pour indexer les images. L'omettre est un moyen rapide de perdre à la fois en accessibilité et en valeur SEO.
Où placer les images sur vos pages ?
Il n'existe pas de règle universelle pour le placement des images, mais quelques schémas fonctionnent de façon constante.
Mettez votre image la plus forte là où les visiteurs regardent en premier. Sur la plupart des pages, c'est la section du haut, visible sans défilement. Si un visiteur fait défiler la page avant de s'engager à lire, le deuxième emplacement d'image, quelque part au milieu de la page, le capte en plein défilement. Une troisième image vers le bas d'une longue page remobilise les visiteurs qui ont lu la majeure partie.
Utilisez les images pour couper de longues sections de texte, mais seulement quand l'image apporte quelque chose. Une image qui illustre le propos du paragraphe voisin fait son travail. Une image placée là uniquement parce que la section paraissait trop longue est du remplissage, et les visiteurs le voient.
Sur mobile, le placement des images change, car l'écran est étroit et les images s'empilent verticalement. Une image placée à côté du texte sur ordinateur apparaîtra au-dessus ou en dessous sur mobile. Testez l'apparence de chaque page sur un téléphone et vérifiez que l'image garde son sens à sa nouvelle position. Cela fait partie de l'application des principes du design adaptatif à toutes les pages de votre site.
Quel format de fichier choisir pour vos images ?
La version courte :
- JPEG pour les photographies. Fichier léger, haute qualité, fonctionne partout.
- PNG pour les logos, les icônes et tout ce qui a un fond transparent ou du texte net.
- WebP pour les deux, si votre plateforme le gère. Il produit des fichiers plus légers que le JPEG et le PNG à qualité égale. La plupart des navigateurs modernes gèrent le WebP sans problème.
- SVG pour les icônes et les illustrations simples. Il s'adapte parfaitement à toutes les tailles avec des fichiers minuscules.
Pour les tailles de fichier, visez moins de 200 kilo-octets pour les images de page courantes. Les images d'en-tête peuvent aller jusqu'à environ 400 kilo-octets. Tout ce qui est plus lourd doit être compressé avant l'import. Une photo de cinq méga-octets prise avec votre téléphone n'a pas sa place sur une page web.
Qu'est-ce que le texte alternatif et pourquoi chaque image en a-t-elle besoin ?
Le texte alternatif est une courte description écrite associée à une image. Il se trouve dans la balise de l'image sur la page, invisible pour les visiteurs voyants mais lu par les lecteurs d'écran et les moteurs de recherche. Les deux en ont besoin pour comprendre ce que contiennent vos images.
Pour l'accessibilité, le texte alternatif est la façon dont les visiteurs qui utilisent un lecteur d'écran perçoivent les images de votre site. Sans lui, ces visiteurs n'entendent rien quand l'image se charge, ce qui laisse un vide dans ce que vous vouliez communiquer. Pour le SEO, les moteurs de recherche ne voient pas les images comme les personnes. Le texte alternatif est le moyen de comprendre ce que montre une image et si elle est pertinente pour la page qu'elle accompagne.
Bien rédiger un texte alternatif, c'est décrire ce qui se trouve vraiment dans l'image, de façon précise et simple. Une photo d'une cuisine rénovée reçoit un texte alternatif comme "cuisine blanche style shaker avec plans de travail en marbre après rénovation" plutôt que "photo cuisine" ou "image1". Si votre mot-clé s'intègre naturellement à la description, incluez-le. Mais écrivez d'abord pour décrire. Un texte alternatif qui ne sert qu'à répéter des mots-clés échoue sur les deux plans.
Chaque image que vous importez doit avoir son texte alternatif rédigé avant la mise en ligne de la page. Cela prend moins d'une minute par image et influence à la fois qui peut accéder à votre contenu et le classement de vos pages.
Comment WEMASY gère les images
Le créateur de site web WEMASY inclut des blocs d'image que vous pouvez ajouter à n'importe quelle section de page. Vous importez directement dans le créateur, vous positionnez et redimensionnez sans toucher au code, et vous ajoutez le texte alternatif dans la même étape. Les images sont servies automatiquement de façon adaptative, et s'ajustent donc à toutes les tailles d'écran sans que vous ayez à créer des versions séparées pour ordinateur et mobile.
Les sections de page WEMASY gèrent les images à côté du texte dans des mises en page en colonnes souples, ou en arrière-plan pleine largeur pour les sections où un visuel fort donne le ton. Dans les deux cas, l'image reste liée au contenu qu'elle soutient au lieu de flotter librement hors de la mise en page.
Découvrez ce qui est inclus avec le créateur de site web WEMASY ou consultez les offres sur la page des tarifs.
Questions fréquentes sur les images de site web
Ai-je besoin de photos professionnelles pour mon site ?
Les photos professionnelles font une vraie différence sur les pages clés, en particulier la page d'accueil et la page À propos, où la confiance se forme. Pour les images secondaires, les articles de blog et les visuels d'appoint, une photo bien éclairée prise avec un téléphone récent convient très bien. La priorité est que l'image soit réelle et pertinente pour votre entreprise, pas qu'elle ait été prise par un professionnel. Avec le créateur de site web de WEMASY, vous pouvez le mettre en place directement sur votre site.
Combien d'images une page d'accueil doit-elle avoir ?
Assez pour soutenir les sections, pas assez pour que la page paraisse encombrée ou se charge lentement. Une image d'en-tête forte, une ou deux images dans le corps de la page et, en option, une photo de l'équipe ou du lieu de travail plus bas forment une structure raisonnable pour la plupart des pages d'accueil de petites entreprises. Chaque image doit mériter sa place au lieu de remplir de l'espace.
Puis-je utiliser des images de banques de photos sur mon site ?
Oui, sous certaines conditions. Les banques de photos proposent des images sous des licences qui autorisent l'usage commercial, mais vérifiez les conditions de chaque image avant de l'utiliser. La limite pratique est que ces images apparaissent sur de nombreux autres sites : réservez-les aux emplacements d'image secondaires plutôt qu'au visuel principal des pages qui demandent de la confiance, comme votre page d'accueil ou votre page À propos.
Quelle taille doivent avoir les images que j'importe sur mon site ?
Compressez avant d'importer. Visez moins de 200 kilo-octets pour la plupart des images de page et moins de 400 kilo-octets pour les images d'en-tête. Utilisez le JPEG pour les photographies, le PNG pour les logos et les images transparentes, et le WebP si votre plateforme le gère. Redimensionnez toujours l'image à la largeur maximale d'affichage avant l'import, plutôt que de laisser le navigateur la réduire.
Les images influencent-elles le classement de mon site dans la recherche ?
Oui, de deux façons. Les grandes images non compressées ralentissent votre page, ce que les moteurs de recherche prennent en compte dans le classement. Les images sans texte alternatif manquent l'occasion de dire aux moteurs de recherche ce que contient la page. Des images à la bonne taille, avec un texte alternatif descriptif, contribuent à la fois à la vitesse de la page et à la visibilité dans la recherche.