Les images posent souvent problème sur un site: il faut qu’elles soient nettes, sans être trop lourdes à charger, et si possible les optimiser pour le référencement. Dans cet article, on va voir comment faire tout ça en même temps, en 7 points clés.
Résumé video
On recommande en général qu’une image d’illustration (c’est-à-dire pas un logo ou une petite icône) ne dépasse pas les 100Ko sur une page. Les 7 étapes qui vont suivre vous aideront à atteindre cet objectif (sans perte de qualité). Notez que l’ordre des étapes correspond à l’ordre dans lequel elles doivent être réalisées.
1 – Optimiser le poids de l’image (compression)
Plus une image contient de détails et plus elle est nette, plus son poids sera lourd. La première étape consiste à compresser l’image pour la faire perdre en qualité… mais sans que ce soit visible à l’œil nu !
Pour ça, on utilise un algorithme de compression qui va se charger de “dégrader” l’image sans que ça se voie. Vous serez surpris des économies de poids qu’on peut faire. Il y a des outils en ligne qui permettent de le faire, comme TinyPNG ou Sqooosh (que j’utilise personnellement).
Dans cet exemple, l’image originale fait 1.5Mo, je fais passer le niveau de qualité de 100% (original) à 70%, me faisant passer l’image à 292Ko, soit une baisse de 82% ! Et comme vous le constatez, il n’y a aucune différence visible entre les 2. On pourrait même aller encore plus loin.
Squoosh est gratuit, mais ne permet de traiter qu’une image à la fois. Si vous avez beaucoup d’images à traiter d’un coup, je recommande XnConvert.
2 – Optimiser les dimensions de l’image
La deuxième étape va être de dimensionner l’image correctement. Si votre image s’affiche sur 150x150px sur votre page, ça ne sert à rien d’avoir un fichier source avec une résolution de 1920x1080px.
C’est logique, plus une image aura une grande résolution, plus il y aura de pixels, donc plus elle sera lourde et mettra du temps à charger (ce qui peut nuire à l’expérience utilisateur, mais également affecter vos Core Web Vitals et donc votre SEO).
Pour ce faire, il existe beaucoup d’outils :
- Photoshop
- Canva
- Figma
- …
Utilisez celui que vous préférez.
Changez la source en fonction du besoin
Il se peut que vous utilisiez la même image à plusieurs endroits sur votre site, mais dans des dimensions différentes.
Par exemple une image de mise en avant pour article WordPress sera affiché en grand (format bannière) sur l’article, mais cette même image sera affiché en tout petit dans la section blog de votre site.
À ce moment là, votre thème doit adapter la source. Typiquement, sur WordPress, il est possible de créer des copies d’une même image dans différentes résolutions (ex : 150px, 480px, 720px, 1080px…) afin de pouvoir aller chercher la bonne en fonction de la zone d’affichage réelle.
Cette technique est aussi pratique pour charger à un même endroit une image large sur bureau, et une version plus légère sur mobile (en responsive).
Donc aillez sous la main votre fichier original le plus grand possible, puis clonez-le pour les formats plus petits. Votre thème peut le faire automatiquement, sinon faites-le manuellement.
3 – Optimiser le format de l’image
Vous vous retrouvez maintenant non seulement avec une image parfaitement compressée, mais aussi parfaitement dimensionnée, et avec aucune perte de qualité visible !
Mais vous avez probablement toujours votre image au format JPG ou PNG. Ce format est pratique dans de nombreuses situations, mais pour le web, il y a mieux.
- Le format .avif
- Le format .webp
Ces deux formats d’image permettent au navigateur de charger le fichier plus rapidement (et peuvent même parfois encore baisser le poids de l’image, sans perte de qualité).
Je recommande le .webp, qui est plus répandu et le mieux supporté des deux, c’est d’ailleurs un format dont Google est à l’origine, donc d’un point de vue SEO ça peut pas faire de mal.
La taille des images sans perte WebP est 26% plus petite que celle des images PNG. Les images avec perte WebP sont 25 à 34% plus petites que les images JPEG comparables avec un indice de qualité SSIM équivalent.
Google Developpers, utiliser un format d’image webp
Le .avif est très bien aussi, la compression est encore meilleure, c’est notamment le format de toutes les images dans les grilles sur Unsplash. Malheureusement, il n’est pas aussi bien supporté par les navigateurs.
Ok, maintenant votre image est au top, et elle fait largement moins de 100Ko, donc elle ne ralentira pas le chargement de la page. Maintenant, on va voir comment notre image peut nous aider à améliorer notre référencement.
4 – Optimiser le nom de l’image
C’est une étape très simple : renommer le nom de votre image (le nom du fichier) avant de l’uploader sur votre site. Ce n’est pas officiel, mais il y a de grandes chances pour que le nom de l’image ait un impact sur le référencement de votre page, notamment si celui-ci contient des mots clés.
Exemple : vous faites un article sur le Mont Fiju, le mot clé que vous ciblez est “Mount Fiju Japan Mountains”, alors vous insérez une image qui contient ces mots clés dans le nom du fichier, comme ceci. 👇
5 – Optimiser la balise Alt de l’image
En plus du nom de l’image, vous avez la balise Alt qui permet d’ajouter une description à l’image. Elle s’affichera si l’image ne charge pas pour X raisons, et permet aussi d’améliorer l’accessibilité en permettant aux lecteurs d’écrans de décrire le contenu des images.
L’attribut le plus important lorsqu’il s’agit de fournir plus de métadonnées pour une image est le texte alternatif (texte décrivant une image). Il améliore également l’accessibilité pour les personnes qui ne peuvent pas voir les images sur les pages Web, y compris les internautes qui utilisent des lecteurs d’écran ou qui disposent d’une connexion à faible bande passante.
Google Search Central, Bonnes pratiques de SEO pour Google Images
Ajouter des mots clés dans la balise Alt est un excellent moyen de renforcer le référencement de votre page.
La balise Alt est aussi utilisée par Google pour savoir ce que représente votre image et l’afficher lorsqu’on fait une recherche Google Image, ce qui peut constituer une source de trafic supplémentaire !
Ne confondez pas la balise Alt avec la légende (notamment sur WordPress). D’un point de vue SEO, la légende n’a aucun intérêt, et d’ailleurs la plupart des thèmes ne l’affichent même pas, ça ne sert à rien dans 90% des cas.
6 – Configurez un Lazy Load
Votre image est désormais optimisée de la meilleure des façons :
- Elle est légère
- Elle est nette
- Elle contient de la sémantique SEO
Mais il reste encore des optimisations possibles, comme configurer un Lazy Load.
C’est un peu technique, mais grosso modo, un Lazy Load est une fonction qui a pour but de ne pas charger l’image tant que l’utilisateur n’a pas scrollé jusqu’à ladite image. Donc si vous arrivez sur une page, et que l’image se trouve tout en bas, elle ne sera pas chargée, jusqu’à ce que vous aillez suffisamment scroller.
C’est pratique, car même une fois parfaitement optimisée, une image (de par sa nature) restera l’un des fichiers les plus lourds à charger sur votre page. Configurer un Lazy load permet donc encore d’améliorer les performances, la vitesse de chargement et les Core Web Vitals. Mais là on est vraiment dans de la micro-optimisation.
7 – Servez les images avec un CDN
C’est overkill pour la plupart des sites, mais si vous avez une grosse infrastructure web avec des milliers d’images, un CDN vous permettra encore de réduire le temps nécessaire pour charger votre image.
Bonus : Les plugins pour automatiser l’optimisation
Si vous êtes sur WordPress, il existe des plugins qui s’occupent de toute la partie technique pour vous :
- Compression
- Redimensionnement
- Auto webp
- Lazy Load
- CDN
En plus, ces plugins vont également prendre en compte les images déjà en ligne et les optimiser aussi. Il ne vous restera qu’a gérer les noms de fichiers et les balises alt pour le SEO. En voici quelques-uns qu’on a testés :
EWWW Optimizer
Un bon rapport qualité prix.
Imagify
Une solution française, pas très chère et facile à configurer, mais sans CDN.
Flying CDN
Un bon choix si vous utilisez déjà le plugin FlyingPress sur WordPress.
ShortPixel
Le meilleur, mais le plus cher. Ils ont le meilleur algorithme de compression et un CDN au top.
Avec tout ça, vous avez toutes les clés pour optimiser votre image en la rendant plus rapide à charger sans altérer la qualité, le tout en améliorant votre référencement ! Et si vous cherchez un prestataire pour s’en occuper pour vous, contactez-nous !
