Comment optimiser les images pour un site web plus écologique ?

Dans une démarche d’éco-conception, l’optimisation des images est une étape incontournable. En effet, les images représentent en moyenne 45% du poids total d’une page web. Pour un site web plus léger et donc plus écologique, optimiser ses images est une nécessité.

Redimensionner les images

Pour réduire le poids d’une page web, l’ensemble des images qui la composent doivent être préalablement redimensionnées. Il est important de comprendre que plus une image est grande, plus elle est lourde. Pour un affichage sur un smartphone, une tablette ou sur un ordinateur, l’image n’a pas besoin d’être plus grande que sa taille d’affichage.

Quels outils pour redimensionner vos images ?

Voici quelques logiciels qui peuvent vous aider à redimensionner vos images avant de les importer sur votre site : Adobe Photoshop, Affinity, ResizePixel, GIMP

Compresser les images

Pour compresser vos images, vous devez utiliser des images bitmaps ou matricielles, c’est-à-dire des images composés de pixels. Les formats compatibles les plus connus sont le JPEG et le PNG. L’objectif est de réduire le poids du fichier sans que l’œil humain ne voit la différence. Il s’agit notamment de diminuer le niveau de détail d’une image afin de trouver le bon rapport qualité/poids. Vous pouvez utiliser des outils comme Adobe Photoshop, Shortpixel, Image Compressor, ou TinyPNG pour effectuer cette manipulation.

Choisir le format d’image idéal

Le format JPEG (Joint Photographic Experts Group)

Format universel aussi bien sur le web que pour les logiciels de traitement d’images, le JPEG est de loin la solution la plus répandue. La compression de ce genre de fichier permet de réduire efficacement son poids. Aucun effet de transparence n’est toutefois possible.

Le format PNG (Portable Network Graphics)

Le PNG est un format standard supporté par tous les moteurs de recherche. Conçu initialement pour remplacer le format GIF, il supporte la transparence mais son taux de compression est néanmoins plus faible que le JPEG.

Le format WebP

Le WebP est un format d’image matricielle mis à disposition par Google. Son objectif est de remplacer les formats JPEG et PNG en proposant une qualité identique avec un poids 30% plus léger. Certains navigateurs ont cependant encore des problèmes de compatibilité avec ce format relativement nouveau.

Le format SVG (Scalable Vector Graphics)

Pour alléger d’avantage votre site Internet, vous pouvez aussi avoir recours à des images vectorielles. Le format majoritairement supporté par les navigateurs est le SVG. Si cette solution est la plus légère qui existe à ce jour, elle convient essentiellement pour des logos ou des illustrations graphiques.

Le chargement différé des images

Le chargement différé ou lazy loading, est une méthode utilisée pour optimiser les performances des pages et ainsi obtenir une navigation plus fluide. Plutôt que de charger l’ensemble du contenu d’une page dès son ouverture, le lazy loading permet de charger uniquement les éléments visibles par l’utilisateur. Le lazy loading est particulièrement utile pour les sites web contenant un nombre important d’images.

Supprimer les métadonnées inutiles

Un certain nombre d’informations relatives à chaque image sont automatiquement générées par les appareils photo. Ces données EXIF (Exchangeable Image File) sont stockées dans les images et prennent de la place. Pour réduire le poids de vos images il est important de supprimer ces métadonnées inutiles.