Demander un devis

Code • • Par Yoan LE DIZES

Optimiser vos images pour la performance SEO

Optimiser vos images pour la performance SEO

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 :

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.