🔎 Dezoomer sur le sujet : Tout savoir sur l'image pour votre site web
La performance d’un site internet est un point clé dans le cadre d’une optimisation pour le référencement sur les moteurs de recherche (SEO). Tout comme son univers thématique. Les images jouent un rôle important pour ces deux aspects.
Dans cette série d’articles dédiée aux images pour le web, j’aborde le point des performances des images. D’une part au sens strict. C’est à dire réduire au maximum les temps de chargement tout en proposant du contenu média. Mais aussi d’un point de vue SEO. Puisque tout projet SEO commence par s’assurer que la structure est saine et performante. Et que les images sont le point le plus susceptible de créer de mauvaises performances. Attaquons nous tout de suite au sujet de l’optimisation des images pour le SEO.
Introduction : Les images et le temps de chargement des pages web
Lorsque vous affichez une page web. Votre client (navigateur) effectue plusieurs requêtes au serveur (hébergement du site internet) pour en afficher le contenu. Parmi ces requêtes, il y a le contenu texte : le fichier HTML. Les éléments de style : le ou les fichiers CSS. Et éventuellement de la logique, des animations… : le ou les fichiers Javascript. En plus de ça, chaque contenu média, ici nous parlons des images et autres photos, fera l’objet d’une requête.
Ainsi les icônes, photos, images ou autre miniatures feront l’objet d’une requête par élément. Et le poids de l’image modifiera le temps de réponse du serveur. Au final, plus le temps de réponse du serveur pour afficher une page est long, et plus l’utilisateur final attendra. Et nous savons tous qu’attendre 4 secondes qu’une page finisse de s’afficher entièrement est frustrant. C’est donc une mauvaise expérience pour le visiteur qui dégrade l’image du site web (sans mauvais jeu de mot).
Contrairement au texte ou aux éléments de style, les fichiers d’image JPEG ou PNG sont relativement lourds. Même lorsqu’ils sont optimisés.
Réduire les temps de chargement d’un site web liés aux images
Nous avons vu que les images sont un point sensible pour les performances d’un site. Et la performance d’un site est un point sensible pour le référencement sur les moteurs de recherche et l’expérience utilisateur. Voyons maintenant comment optimiser vos images.
Limiter l’utilisation des images si ce n’est pas nécessaire
Avant d’aller plus loin, ça paraît évident mais évitez l’utilisation des images lorsque ce n’est pas nécessaire. CSS3 offre beaucoup de liberté pour créer des éléments de charte graphique. Alors avant d’utiliser une image, vérifiez qu’il n’existe pas une solution plus légère !
Bien choisir les tailles, proportions, formats et poids de vos images
J’en parle dans cette introduction à l’utilisation des images pour un site internet. Il y a 4 points sur lesquels jouer avant d’uploader votre image et de l’utiliser sur votre site.
- La taille de l’image, en pixels : une image ne doit pas être plus grande que ce qui sera utilisé sur votre site web.
- Les proportions (ratio) : l’image doit respecter le ratio qui sera utilisé sur le site pour ne pas être « étirée » ou « compactée ». Ex : 4:3, 1:1, 2:1 etc
- Le format (extension du fichier) : le type de fichier doit être choisi en fonction de son utilisation, on évite les fichiers lourds comme les PNG pour une icône si un SVG, plus léger, peut être choisi à la place.
- Le poids de l’image (taille du fichier en Ko, Mb…) : l’image doit être exportée pour le web, en réduisant sa qualité et en la compressant.
Lazy loading, infinite loading : déférer le chargement des images non essentielles
Il est possible de déférer le chargement des images non essentielles ou du moins qui n’apparaissent pas au premier coup d’œil. Tout ce qui est sous la ligne de flottaison des grands écrans n’a pas besoin d’être chargé immédiatement avant que l’utilisateur ne scroll.
Lazy loading des images : afficher l’image quand elle rentre dans la zone visible du navigateur
Le lazy loading consiste donc à charger les images au moment où elles entrent dans l’écran et pas avant. Pour le lazy loading, il est possible d’implémenter des solutions en Javascript assez complexes. Une solution beaucoup plus simple existe depuis plus récemment. Il suffit d’ajouter l’attribut loading à une image.
<img src=’/img/mon-image.jpg’ loading=’lazy’>
C’est aussi simple que ça !
Si vous utilisez WordPress, sachez que depuis la version 5.5 cet attribut est présent par défaut si votre thème est bien implémenté.
L’infinite loading : « créer » le contenu au fur et à mesure du défilement
L’infinite loading est une technique qui consiste à créer le contenu au fur et à mesure que l’utilisateur défile. Contrairement au lazy loading où l’image est déjà préexistante dans le code HTML mais pas chargée, l’infinite loading ajoute du contenu à la page.
Les réseaux sociaux utilisent largement cette technique pour leurs feeds. Quand vous défilez sur Twitter, Facebook ou Instagram, entre autres, tous les posts et les images qu’ils contiennent ne sont pas chargés quand la page s’ouvre. Heureusement !
Plus vous défilez, plus du contenu s’ajoute. Pour se faire on va généralement mettre en place une API côté serveur et un script côté client (navigateur) qui va aller demander plus de contenu au serveur à mesure du scroll.
On diffère les requêtes au serveur pour réduire au maximum le premier temps de chargement de la page. Et on maximise l’expérience utilisateur, car tout marche, tout de suite !
La mise en cache des images pour accélérer encore le chargement des visiteurs qui reviennent
Pensez à configurer la mise en cache des images et pas uniquement des fichiers statiques ! Un visiteur qui reviendra profitera de cette mise en cache et n’aura pas à recharger une image qu’il a déjà chargé une fois.
Image et thématique : restez dans le thème
La thématique de votre site, son univers sémantique, c’est essentiel pour vous référencer dans les thèmes visés. Pour les images, comme pour le contenu : restez dans le thème.
La balise alt
La balise alt, c’est déjà important pour l’accessibilité. Mais c’est également l’occasion d’y placer des mots clés. Je ne recommande pas d’y mettre des mots clés n’ayant aucun rapport avec l’image, cette technique étant considérée par Google comme du spam. Mais plutôt, d’y mettre des mots clés… parce qu’ils sont présents sur l’image ! Et tout le monde y gagne. Vous renforcez la thématique de la page, les utilisateurs ont des images cohérentes et Google comprend mieux votre sujet !
Le titre de l’image
Le titre de l’image est visible dans votre fichier HTML, il est lisible par les moteurs de recherche. D’ailleurs, si votre image tombe dans les résultats « Image » d’un moteur de recherche, son titre sera affiché.
En ce sens, n’oubliez pas d’utiliser des titres cohérents et lisibles avant d’upload votre image en ligne. On évitera les titres du genre « 20212901.jpg » ou « ImageRetouchéeDernierJet.png ». Préférez un titre évocateur, dans le thème, et séparez les mots par des tirets. Ex : « chien-avec-collier-rouge.jpg »
Voilà pour cet article introductif au sujet de l’optimisation des images pour le référencement sur les moteurs de recherche.