Les images sont souvent parmi les fichiers les plus lourds d’un site internet.
Et c’est assez logique.
Aujourd’hui, un smartphone ou un appareil photo peut produire une photo de plusieurs milliers de pixels de large et pesant plusieurs mégaoctets.
La qualité est excellente. Mais est-ce vraiment nécessaire pour afficher cette photo sur un site internet ?
Pas toujours.
Si vous ajoutez directement ces fichiers sur votre site, les pages peuvent devenir beaucoup plus lourdes et donc plus lentes à charger.
C’est particulièrement gênant pour une personne qui consulte votre site depuis son smartphone avec une connexion moyenne.
Il existe heureusement des solutions assez simples.
Le format WebP en fait partie. Il permet de réduire le poids des images tout en conservant une très bonne qualité visuelle.
Mais convertir une photo en WebP ne suffit pas.
Il faut également choisir les bonnes dimensions, le bon niveau de compression et un poids adapté.
Dans cet article, je vais vous expliquer simplement comment préparer correctement les images de votre site internet, même si vous n’avez aucune connaissance technique.
Qu’est-ce que le format WebP ?
Commençons par le plus simple.
Une image numérique peut être enregistrée sous différents formats.
Vous connaissez probablement les plus courants : JPEG, PNG ou GIF.
WebP est simplement un autre format d’image, développé par Google pour le Web.
Son intérêt principal est de pouvoir proposer une bonne qualité d’image avec un fichier généralement plus léger.
Prenons un exemple.
Vous avez une photo en JPEG qui pèse 1 Mo.
Après avoir correctement redimensionné et compressé cette photo en WebP, son poids peut être nettement inférieur tout en restant visuellement très proche de l’original.
Pour le visiteur, la différence de qualité peut être difficile à remarquer.
Pour le navigateur, en revanche, il y a moins de données à télécharger.
Et lorsque votre page contient 10 ou 15 photos, toutes ces économies commencent à avoir de l’importance.
Pourquoi faut-il réduire le poids des photos ?
Imaginez le site internet d’un gîte.
La page d’accueil comporte une grande photo de la maison, puis des photos des chambres, de la piscine, du jardin et des environs.
Cela peut facilement représenter une dizaine d’images.
Supposons maintenant que chaque photo pèse 2 Mo.
La quantité de données à charger devient rapidement importante.
Sur une connexion Internet très rapide, le visiteur ne s’en rendra peut-être pas immédiatement compte.
Mais sur un smartphone avec une connexion moins bonne, la situation peut être très différente.
La page commence à s’afficher.
Les photos arrivent progressivement.
Le visiteur attend.
Et s’il trouve le site trop lent, il peut tout simplement revenir sur Google et consulter le site suivant.
Voilà pourquoi j’accorde de l’importance à l’optimisation des images lorsque je réalise un site.
Ce n’est pas uniquement une question technique. C’est aussi une question d’expérience utilisateur.
Une image WebP peut-elle améliorer votre référencement Google ?
Il faut être précis sur ce point.
Mettre toutes vos images en WebP ne va pas automatiquement vous faire monter dans les résultats Google.
Le référencement naturel, ou SEO, dépend de nombreux éléments.
La qualité du contenu, la pertinence des pages, la structure du site, sa popularité ou encore l’expérience proposée aux visiteurs entrent dans cette équation.
La vitesse du site fait également partie des éléments à surveiller.
Google utilise notamment les Core Web Vitals, des indicateurs qui permettent de mesurer certains aspects de l’expérience proposée par une page.
Vous n’avez pas besoin d’en connaître tous les détails pour comprendre le principe.
Un site rapide et agréable à consulter repose sur de meilleures bases qu’un site extrêmement lourd.
Optimiser les images contribue à améliorer cette performance.
WebP est donc un outil d’optimisation. Ce n’est pas une formule magique pour être premier sur Google.
Convertir en WebP ne suffit pas
C’est probablement le point le plus important de cet article.
Imaginons une photo prise avec un appareil photo récent.
Elle mesure :
6000 × 4000 pixels
et pèse :
8 Mo.
Vous la convertissez en WebP.
C’est déjà mieux.
Mais si votre site affiche cette photo dans une zone de seulement 800 pixels de large, pourquoi lui envoyer une image de 6000 pixels ?
C’est comme utiliser un camion pour transporter un sac de courses.
Cela fonctionne, mais c’est inutilement lourd.
Avant de mettre une photo sur un site, il faut donc regarder trois choses :
ses dimensions + son niveau de compression + son format.
C’est l’ensemble qui permet d’obtenir une image réellement optimisée.
Quelle taille choisir pour les photos d’un site internet ?
Il n’existe pas une seule taille valable pour toutes les images.
Tout dépend de leur utilisation.
Une petite photo située dans une colonne n’a évidemment pas besoin des mêmes dimensions qu’une grande photo occupant tout l’écran.
Voici quelques repères simples.
| Utilisation | Dimensions conseillées |
|---|---|
| Grande bannière / Hero | 1920 × 1080 px |
| Bannière panoramique | 1920 × 800 px |
| Grande photo pleine largeur | 1600 à 1920 px de large |
| Photo classique d’une section | 1200 × 800 px |
| Photo dans une colonne | environ 800 × 600 px |
| Image d’un article de blog | 1200 × 675 px |
| Image carrée | 800 × 800 px |
| Petite vignette | 400 à 600 px de large |
Ces dimensions ne sont pas des obligations.
Considérez-les plutôt comme des points de repère.
La règle est simple :
n’utilisez pas une image beaucoup plus grande que la taille à laquelle elle sera réellement affichée.
Quelle taille choisir pour une bannière ou une Hero ?
La Hero correspond généralement à la grande zone située tout en haut d’une page.
C’est souvent la première chose que voit le visiteur.
Pour une grande photo affichée sur un écran d’ordinateur, une dimension de :
1920 × 1080 pixels
est un bon point de départ.
Si votre bannière est beaucoup plus panoramique et moins haute, vous pouvez par exemple utiliser :
1920 × 800 pixels.
Mais attention au mobile.
Un écran d’ordinateur est horizontal alors qu’un smartphone est vertical.
Votre grande photo horizontale va donc être fortement recadrée lorsqu’elle sera affichée sur un téléphone.
Si le sujet principal de votre photo est placé complètement à gauche ou à droite, il risque de disparaître.
Pour certaines Hero importantes, il peut donc être intéressant de préparer deux versions de l’image.
Par exemple :
- Ordinateur : 1920 × 1080 px
- Mobile : environ 800 × 1000 ou 800 × 1200 px
Vous pouvez ainsi choisir vous-même le meilleur cadrage pour chaque écran.
Quel poids faut-il viser pour une image ?
Il faut maintenant distinguer dimensions et poids.
Les dimensions sont exprimées en pixels.
Le poids du fichier est exprimé en Ko ou en Mo.
Deux photos de 1920 × 1080 pixels peuvent avoir exactement les mêmes dimensions et pourtant avoir des poids très différents.
L’une peut peser 180 Ko.
L’autre 2 Mo.
Tout dépend notamment du format, de la photo et du niveau de compression.
Pour un site vitrine, voici les ordres de grandeur que j’aime viser lorsque la photo le permet :
- Petites images : moins de 100 Ko
- Photos classiques : environ 100 à 200 Ko
- Grande photo ou Hero : environ 150 à 300 Ko
Mais ne transformez pas ces chiffres en règles absolues.
Si une très belle photo nécessite 320 Ko pour conserver une qualité satisfaisante, ce n’est pas dramatique.
À l’inverse, obtenir absolument une image de 70 Ko en détruisant sa qualité n’a aucun intérêt.
Il faut toujours rechercher un équilibre entre qualité et légèreté.
Comment convertir facilement une photo en WebP ?
Vous n’avez pas besoin d’acheter un logiciel professionnel.
Vous pouvez utiliser gratuitement Squoosh.
C’est un outil très pratique qui fonctionne directement dans votre navigateur.
Son gros avantage est qu’il permet de voir immédiatement la différence entre l’image originale et l’image optimisée.
Prenons un exemple concret
Vous possédez une photo de :
6000 × 4000 pixels – 7,5 Mo
et vous souhaitez l’utiliser comme grande photo sur votre site.
Étape 1 : importer la photo
Ouvrez Squoosh et importez votre image.
Étape 2 : réduire ses dimensions
Si elle doit être affichée en grand sur le site, vous pouvez par exemple la réduire à environ :
1920 pixels de large.
Vous venez déjà de supprimer énormément de données inutiles.
Étape 3 : sélectionner WebP
Choisissez ensuite WebP comme format de sortie.
Étape 4 : régler la qualité
Vous pouvez ajuster progressivement le niveau de compression.
Ne regardez pas uniquement le chiffre.
Regardez surtout votre photo.
- Les détails restent-ils nets ?
- Les visages sont-ils corrects ?
- Les textures sont-elles encore belles ?
Si oui, vous pouvez continuer.
Étape 5 : vérifier le poids
Regardez maintenant le poids obtenu.
Votre fichier de plusieurs mégaoctets peut devenir une image de quelques centaines de kilo-octets, selon son contenu et les réglages choisis.
Vous disposez alors d’une image beaucoup mieux adaptée à un site internet.
Faut-il convertir toutes ses images en WebP ?
WebP convient très bien à de nombreuses images utilisées sur un site internet, notamment les photographies.
Mais ne raisonnez pas uniquement en termes de format.
Avant d’ajouter une image, posez-vous plutôt ces questions :
- Est-elle aux bonnes dimensions ?
- Son poids est-il raisonnable ?
- La qualité est-elle suffisante ?
- Est-ce le bon format pour cette utilisation ?
C’est beaucoup plus pertinent que de simplement décider que toutes les images doivent absolument être en WebP.
Et AVIF, c’est quoi ?
Vous avez peut-être également rencontré le format AVIF.
C’est un autre format moderne qui peut offrir une excellente compression.
Dans certaines situations, il permet d’obtenir des fichiers encore plus légers.
Cela signifie-t-il que WebP est dépassé ?
Non.
WebP reste largement utilisé et convient parfaitement à de nombreux sites internet.
L’objectif n’est pas de changer de format chaque fois qu’une nouvelle technologie apparaît.
Pour un site vitrine classique, une image correctement dimensionnée et compressée en WebP constitue déjà une excellente base.
Pensez également au nom de vos images
Avant d’envoyer votre photo sur WordPress, regardez son nom.
Une photo provenant d’un appareil peut s’appeler :
IMG_8475.jpg
Ce nom ne donne aucune information.
Vous pouvez le remplacer par quelque chose de beaucoup plus compréhensible.
Par exemple :
renovation-facade-maison-tours.webp
ou :
chambre-gite-amboise.webp
Restez simple et descriptif.
Il ne s’agit pas d’ajouter dix mots-clés dans chaque nom de fichier.
Le nom doit simplement permettre de comprendre ce que représente l’image.
Et le texte alternatif des images ?
Dans WordPress, vous trouverez également un champ appelé texte alternatif ou ALT.
Son rôle principal est lié à l’accessibilité.
Il permet notamment de décrire une image pertinente aux personnes utilisant un lecteur d’écran.
Il peut également aider les moteurs de recherche à comprendre le contenu d’une image dans son contexte.
Mais là encore, inutile de remplir ce champ avec une succession de mots-clés.
Décrivez simplement l’image lorsque celle-ci apporte une information.
Par exemple :
« Menuisier installant une fenêtre en bois sur mesure »
est beaucoup plus utile que :
« menuisier Tours fenêtre bois menuiserie artisan Tours 37 ».
Écrivez d’abord pour les personnes.
Comment savoir si vos images sont trop lourdes ?
Vous pouvez utiliser Google PageSpeed Insights.
Entrez simplement l’adresse d’une page de votre site.
L’outil analyse différents éléments susceptibles d’avoir un impact sur ses performances.
Il peut notamment vous aider à repérer certaines images trop lourdes ou mal dimensionnées.
Ne cherchez cependant pas à obtenir absolument 100/100.
Ce chiffre ne doit pas devenir une obsession.
Ce qui compte surtout, c’est de comprendre les problèmes importants et de les corriger.
Une image de 5 Mo utilisée comme bannière mérite clairement votre attention.
Une petite différence de quelques kilo-octets beaucoup moins.
Conclusion : comment bien préparer les images de son site ?
Vous l’aurez compris, optimiser une image ne consiste pas simplement à cliquer sur « Convertir en WebP ».
Il faut réfléchir à l’ensemble.
- Quelle sera la taille d’affichage de ma photo ?
- Quelles dimensions dois-je utiliser ?
- Quel poids puis-je obtenir sans dégrader la qualité ?
- Quel format est adapté ?
Pour retenir l’essentiel, gardez cette formule en tête :
Bonnes dimensions + compression raisonnable + format adapté = image optimisée.
Pour une grande Hero, 1920 × 1080 px constitue souvent un bon point de départ.
Pour une photo classique, 1200 × 800 px peut largement suffire.
Et pour effectuer facilement le redimensionnement et la conversion en WebP, Squoosh est accessible gratuitement depuis un navigateur.
Mais l’objectif final n’est pas de devenir spécialiste des formats d’image.
Votre visiteur ne saura probablement jamais que vos photos sont en WebP.
Et c’est très bien ainsi.
Ce qu’il remarquera, en revanche, c’est que vos photos sont belles et que votre site s’affiche rapidement.
C’est finalement cela qui compte.
Un site rapide est plus agréable à consulter, particulièrement sur smartphone. Le visiteur peut découvrir vos prestations, regarder vos réalisations et trouver rapidement les informations dont il a besoin.
Optimiser les images de son site n’est donc pas seulement une question de performance technique. C’est aussi offrir une meilleure expérience à ses futurs clients.
Les mots à connaître
- WebP : Un format d’image développé par Google pour le Web, qui propose une bonne qualité avec un fichier généralement plus léger.
- Compression : La réduction du poids d’un fichier image. Un bon réglage garde une qualité satisfaisante.
- Dimensions et poids : Les dimensions se mesurent en pixels (largeur × hauteur). Le poids du fichier se mesure en Ko ou en Mo. Deux images de mêmes dimensions peuvent avoir des poids très différents.
- Hero : La grande zone située tout en haut d’une page, souvent la première chose que voit le visiteur.
- AVIF : Un autre format d’image moderne, qui peut offrir une excellente compression.
- Texte alternatif (ALT) : La description d’une image. Il sert avant tout à l’accessibilité et peut aider les moteurs de recherche à comprendre l’image dans son contexte.
- Core Web Vitals : Des indicateurs utilisés par Google pour mesurer certains aspects de l’expérience proposée par une page.
- Google PageSpeed Insights : Un outil qui analyse une page de votre site et peut aider à repérer des images trop lourdes ou mal dimensionnées.
