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

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 navigateurs web. 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 anciens navigateurs ont cependant encore des problèmes de compatibilité avec ce format relativement nouveau.

Le format AVIF (AV1 Image File Format)

AVIF est un format d’image de nouvelle génération basé sur le codec vidéo AV1. À qualité visuelle similaire, le format AVIF peut réduire la taille des fichiers d’environ 50% par rapport au format JPEG. La compatibilité du format AVIF avec les navigateurs s’est améliorée ces dernières années, mais elle reste partielle et dépend du navigateur ainsi que de sa version.

Le format GIF (Graphics Interchange Format)

Le GIF est un format d’image numérique capable de présenter aussi bien une image fixe qu’une courte animation. Cette dernière est créée grâce à une succession d’images affichées à un rythme rapide, donnant naissance à une séquence fluide. Souvent de courte durée, l’animation se répète en boucle et propose une représentation visuelle à la fois simple et dynamique.

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 (lazy loading)

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.