Image SEO : Les optimisations techniques qui paient pour vos visuels
Si vous connaissez probablement déjà tous les subtilités générales liées au référencement des images, comme réduire au maximum le poids des fichiers et remplir les alt text intelligement, les optimisations plus techniques sont moins connues. Liste non exhaustive des leviers techniques qui paient :
Preload
L’attribut rel=”preload” est destiné aux images mise en avant, c’est à dire qui s’affichent au dessus de la ligne de flottaison.
Preload va prioriser le chargement de cette image-ci, ce qui va avoir un impact positif sur certains Core Web Vitals comme le LCP ou d’autres métriques comme le Start Render qui va potentiellement influer sur vos conversions et le niveau d’interaction.
La balise doit être insérée dans le <head> et ressemble à ça :
<link rel="preload" href="https://www.sylvaincharbit.com/wp-content/uploads/2024/05/logo-header-transparent-mini.webp" as="image" type="image/webp">Lazy Load
Beaucoup plus connu, le lazy loading s’adresse aux images situées sous la ligne de flottaison ou « cachées » dans un menu et les charge en différé.
Les éléments visibles immédiatement par les utilisateurs ne seront donc pas bloqués par les éléments invisibles, ce qui va avoir un impact positif sur des métriques comme le TTI (délai avant interaction) et le démarrage du rendu.
La balise ressemble à cela :
<img loading="lazy" src="image.jpg" alt="une belle image" />À noter que l’image mise en avant, située au dessus de la ligne de flottaison, ne doit pas disposer du lazy loading sinon l’impact sur le LCP sera négatif.
Eager
Si vous utilisez par exemple un plugin WordPress qui ajoute du lazy loading partout, y compris sur les images situées au dessus de la ligne de flottaison (ce qui va dégrader les performances), alors l’attribut eager est votre par planche de salut.
C’est à dire qu’il va avoir priorité sur l’attribut lazy et va donc pouvoir être ajouté en plus et corriger l’erreur.
De manière générale, eager est le comportement par défaut pour une image, c’est à dire qu’elle chargera le plus tôt possible.
Et la balise ressemble à :
<img loading="eager" src="image.jpg" alt="une belle image" width=”300″ height=”200″>WebP
Convertir une image au format WebP permet de réduire encore plus le poids d’une image tout en minimisant l’impact sur la qualité.
En revanche, .webp n’est pas encore compatible avec tous les navigateurs ou les réseaux sociaux, ce qui peut avoir un impact sur certaines sources de trafic.
Il est en général recommandé d’analyser d’où viennent les visiteurs en majorité (avec Google Analytics par exemple) puis de faire son choix.
SVG Inline
Le format SVG dans une configuration dite inline va avoir un effet positif sur les performances mais doit être utilisé sur les images décoratives, c’est à dire qui ne sont pas destinées à être indexées, comme les icônes et les arrières-plans.
Le meilleur moyen d’obtenir le code d’un SVG est de l’ouvrir avec un navigateur, puis « Voir Source » (Option+Command+U si vous êtes sur Mac).
Une fois le code obtenu, il est possible de le passer dans un outil pour l’avoir inline puis de l’ajouter à vos pages.
L’optimisation des images est souvent un moyen rapide d’améliorer considérablement les performances d’un site sans y passer des heures. Ces quelques attributs et techniques constituent un bon point de départ.