On m’a confié la refonte d’un site existant, et j’ai constaté des images avec un poids absolument impressionnant, un record. Les images occupaient environ 600px de large sur la page et pesaient plus de 50 Mo, 2 images en PNG comme celle-ci sur la page qui pesaient donc plus de 100 Mo. En réduisant, la taille de ces images à 600px et en les passant en JPG, j’arrive à 32 Ko, réduisant ainsi le poids de ma page de 110 Mo.
Un autre cas, un site fait il y a quelques années avec le CMS SPIP dont l’administration était plantée à cause d’une série d’images comprises entre 15 et 34 Mo. Il a fallu retrouver les images sur le serveur FTP, les réduire dans Photoshop, les recopier sur le serveur. L’administration est devenue de nouveau accessible, il a fallu ensuite, retourner sur chaque image et les réenregistrer.
Formats d’images :
-
- JPEG (Joint Photographic Experts Group) : Ce format est idéal pour les photographies et les images complexes avec de nombreuses couleurs. Il offre une compression avec perte de qualité, ce qui signifie que certaines données de l’image sont supprimées pour réduire la taille du fichier. Vous pouvez ajuster le niveau de compression pour trouver le bon compromis entre la qualité et la taille. À utiliser sur les photos.
-
- PNG (Portable Network Graphics) : Les PNG sont souvent utilisés pour des images avec des zones transparentes ou des illustrations simples. Ils offrent une compression sans perte, ce qui signifie que la qualité de l’image reste intacte, mais ils ont tendance à produire des fichiers plus volumineux que les JPEG. On l’utilisera quand on a besoin de transparence ou pour des images avec peu de couleur, un logo, un graphique…
-
- GIF (Graphics Interchange Format) : Les GIF sont généralement utilisés pour les images animées courtes. Ils utilisent une compression avec perte, mais la perte de qualité est généralement moins perceptible dans les animations. Les gifs animés peuvent vite être très lourds, à voir au cas par cas.
-
- WebP : Un format d’image plus récent développé par Google, qui offre une bonne qualité d’image avec une compression plus efficace que le JPEG ou le PNG. Il est pris en charge par désormais tous les navigateurs en version récente. Il permet de faire ce que font tous les autres formats, transparence comme le PNG, compression comme le jpg, et animation comme le GIF, et globalement à qualité équivalente on est plus léger. Il est depuis peu intégré dans PhotoShop dans « enregistrer sous ».
Bonnes pratiques pour réduire la taille des images :
-
- Redimensionnez les images : Assurez-vous que les images ont les dimensions appropriées pour leur utilisation sur votre site. Évitez de charger des images plus grandes que ce dont vous avez réellement besoin.
-
- Utilisez la compression : Utilisez des outils de compression d’image pour réduire la taille des fichiers tout en maintenant une qualité visuelle acceptable, en utilisant les formats comme le JPG ou le WEBP.
-
- Optimisez le format : Choisissez le format d’image le plus approprié en fonction du contenu. Par exemple, utilisez le format JPG pour les photographies et le format PNG pour les images avec une transparence.
Conséquences d’images trop lourdes
-
- Expérience utilisateur médiocre : Les images volumineuses augmentent le temps de chargement des pages, les utilisateurs sont moins susceptibles de rester sur un site lent. Les taux de rebond peuvent augmenter si les images mettent trop de temps à se charger, le site devient beaucoup moins fluide à consulter.
-
- Référencement : Google et d’autres moteurs de recherche tiennent compte de la vitesse de chargement des pages dans leur algorithme de classement. Un site plus lent peut donc voir sa visibilité diminuer dans les résultats de recherche.
-
- Consommation de données : Les utilisateurs sur des connexions mobiles peuvent être confrontés à des frais de données supplémentaires s’ils téléchargent de nombreuses images volumineuses.
La consommation d’énergie liée au poids des images sur Internet
Les images trop lourdes peuvent contribuer à une consommation d’énergie accrue pour plusieurs raisons :
1. Serveurs et bande passante : Lorsque des images lourdes sont hébergées sur des serveurs, elles nécessitent plus d’énergie pour être stockées et transmises via Internet. Plus les images sont volumineuses, plus il faut de temps pour les transférer, ce qui peut augmenter la demande d’énergie des centres de données et des infrastructures réseau.
2. Charge du navigateur : Lorsque les utilisateurs accèdent à un site web contenant des images lourdes, leurs appareils (ordinateurs, smartphones, tablettes, etc.) doivent utiliser plus de puissance de traitement et de mémoire pour afficher ces images. Cela peut entraîner une consommation d’énergie plus élevée de la part des appareils utilisateurs.
3. Utilisation de la batterie : Sur les appareils mobiles, l’affichage d’images lourdes peut entraîner une utilisation plus rapide de la batterie. Les utilisateurs qui naviguent sur des sites avec des images volumineuses verront leur autonomie réduite.
4. Transmission de données : Le transfert de données sur Internet implique une infrastructure réseau qui consomme de l’énergie. Les données plus lourdes nécessitent plus de bande passante, ce qui peut entraîner une augmentation de la consommation d’énergie dans l’ensemble du réseau.
5. Impact environnemental : Une consommation d’énergie accrue due au poids des images peut contribuer à une empreinte carbone plus élevée. Les centres de données et les infrastructures Internet sont alimentés en électricité, et une demande accrue en énergie a forcément un impact environnemental négatif.
Il est donc essentiel d’optimiser les images sur votre site Internet pour garantir de bonnes performances, une expérience utilisateur satisfaisante, un meilleur référencement et avoir un moindre impact écologique. En utilisant les bons formats et en suivant les bonnes pratiques de compression et de dimensionnement, vous pouvez réduire la taille des images tout en préservant leur qualité.
