services web de proximité


Coordonnées de contact

SASU Yoma-Web, Yoan LE DIZES
55 Chemin de Combeguilhem
47240 Castelculier

+33 6 64 31 54 42

Réseaux sociaux
Vous avez une question ou avez besoin d'un devis, n'hésitez pas à nous contacter.
Captcha
Vous pouvez cliquer sur l'image pour changer le captcha.

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

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.


Partagez vos opinions