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 :
- Image compressor permet d'optimiser jusqu'à 20 images en une fois
- Compress JPEG permet également de compresser 20 images à la fois
- ...
Le format webp
En 2010, Google a créé un nouveau format le webp.
Plus performant, le webp permet de conserver la qualité de votre image avec une réduction du poids de 20 à 35%, ce qui n'est pas négligeable.
Contrairement à une compression classique avec laquelle vous allez perdre en qualité d'image : couleur, définition, fond transparent...
Il est aujourd'hui compatible avec tous les navigateurs modernes : Chrome, Firefox, Opéra, le navigateur Android (sauf Safari)... alors pourquoi s'en priver.
Pour ne pas perdre les utilisateurs de Safari, qui ne pourront pas visionner vos images, il faudra leur servir des images aux formats plus classiques : jpg, png, ou gif.
De nombreux outils en ligne sont disponibles et vous permettent de convertir votre image jpg, png, ou encore gif en webp :
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.
