Optimiser vos images pour la performance SEO
- Webdesign
- 17255 vues
- Yoan LE DIZES Expert SEO technique & sémantique
Les points clés, Yoma-Web :
- Poids et dimensions : redimensionnez et compressez vos images (idéalement <150 Ko) pour accélérer le chargement des pages et améliorer la performance.
- Formats adaptés : utilisez JPEG/PNG/SVG en fonction du contenu, et préférez WebP pour sa compression efficace, avec fallback pour Safari.
- Lazy loading : chargez les images uniquement au scroll en utilisant loading="lazy" ou des plugins pour réduire le temps de chargement initial.
- Sprites CSS : regroupez les petites icônes ou images décoratives dans un seul fichier sprite pour réduire le nombre de requêtes HTTP.
Comme vous le savez déjà, il est primordial d'améliorer la vitesse de chargement de votre site internet.
Les images représentent en moyenne la moitié du poids de vos pages.
Une meilleure expérience pour les utilisateurs se traduit forcément par une vitesse de chargement optimale, et donc par l'optimisation de vos images.
Tailler et optimiser le poids de vos images
Il est nécessaire de redimensionner vos images avec des outils comme Photoshop, Paint ou Gimp pour Linux, avec un format adapté au Web jpg, png, gif ou encore svg (pour les animations par exemple).
Internet regorge d'outils pour optimiser le poids de vos images :
- Image compressor permet d'optimiser jusqu'à 20 images en une fois
- Compress JPEG permet également de compresser 20 images à la fois
- ...
Le format webp ou AVIF
En 2010, Google a créé un nouveau format : WebP.
Plus récemment, le format AVIF est venu le compléter en offrant une compression encore plus efficace tout en conservant une excellente qualité d’image.
Ces formats permettent une réduction du poids des images de 20 à 50 %, sans perte visible de qualité (couleurs, transparence, netteté…), contrairement aux compressions classiques.
Ils sont compatibles avec la majorité des navigateurs modernes :
- WebP : pris en charge par Chrome, Firefox, Edge, Opera, Android (sauf Safari).
- AVIF : pris en charge par Chrome, Firefox, Edge, Safari 16+ et Android récents.
Pour garantir l’affichage chez tous les utilisateurs (notamment sur Safari plus ancien), prévoyez une version de secours au format JPG, PNG ou GIF via un balisage picture.
Outils en ligne pour convertir vos images en WebP ou AVIF :
Utiliser des sprites CSS
Les sprites CSS sont une technique qui permet de charger qu'une seule image pour vos éléments statiques. En fait, cette image contient toutes les images statiques de votre site : fond de site, boutons sociaux, logos...
Il vous faudra ensuite découper votre image avec votre CSS afin de ne desservir que l'élément de l'image que vous souhaitez afficher.
Cette technique associée au format webp est redoutable pour gagner énormément de temps de chargement et réduire vos requêtes.
Là encore, vous allez retrouver des générateur en ligne comme : CSS Sprite Generator ou Toptal Generator.
Utiliser le lazy loading
Cette technique consiste à ne charger que les éléments visibles sur l'écran de l'utilisateur, et ne charger que le reste des images au scroll.
Vous avez un projet Web ?
Profitez de l'expérience d'un expert du
WEB
Je vous accompagne de la création à la stratégie de positionnement de votre site web.
