Éco-concevoir un site internet, c’est maitriser, quantifier et optimiser les ressources nécessaires et suffisantes au chargement d’une page web. Selon une estimation, le poids moyen des médias d’une page internet représente jusqu’à 60% du poids total. Pour l’Eco-Index, le poids fait justement partie des 3 grands indicateurs pour évaluer le niveau d’écoconception d’une page. L’utilisation et l’optimisation des images sont donc des vecteurs importants d’amélioration d’écoconception d’une page internet.
L’importance des tailles d’images importées sur un serveur d’hébergement
Afin de limiter la taille totale qu’occupe l’ensemble des médias d’un site sur un serveur, il est nécessaire d’importer des images correctement dimensionnées pour un emploi sur le web. Il faut comprendre que la taille d’une image est proportionnelle à son poids. Plus l’image est grande, plus son poids est important !
Généralement, une image sera très peu utilisée au-delà d’une largeur de 1920px sur une page internet. L’import d’une image plus grande sur un bibliothèque média comme sur le CMS WordPress qui va bientôt sortir sa version 6.0, est non-conseillé et optimise son empreinte environnementale. Plein d’outils s’offrent à vous pour redimensionner vos images avant leurs imports. En voici quelques exemples :
- Adobe Photoshop
- canva.com
- GIMP
Écoconcevoir un site web consiste, à niveau de qualité et de service constant, à réduire la quantité de moyens informatiques et télécoms nécessaires, c’est-à-dire son empreinte matérielle.Écoconception web : les 115 bonnes pratiques
Respecter l’affichage d’une image et sa taille originale
Afin de respecter les bonnes pratiques de l’écoconception, il est important d’intégrer des images sur une page web qui présentent une taille d’affichage équivalente à leurs tailles intrinsèques. Utiliser une image plus grande impactera le poids de la page, la performance d’affichage et par conséquence une dévalorisation de son éco-conception.
De plus, ces normes font également parties des points d’analyse et de performance des critères de référencement naturel SEO comme sur l’outil Lighthouse.
Quantifier et raisonner l’emploi des médias, un choix important pour l’éco-conception web
Comme évoqué plus haut, les médias représentent plus de la moitié des ressources téléchargées au chargement d’une page. Il faut comprendre que le poids de la page et le nombre de requêtes HTTP augmenteront en conséquence de la quantité de médias intégrés.
Autrement dit, moins on utilise de médias dans le contenu, plus le site internet est éco-conçu. Cependant, il est important de rendre à César ce qui est à César : les médias sont les contenus les plus consommés sur le web !
C’est pourquoi il faut quantifier et raisonner l’emploi des médias sur ses pages. Il faut analyser l’importance et la pertinence de ceux-ci par rapport aux sujets évoqués. A-t-on vraiment besoin d’intégrer une image quand celle-ci n’est pas pertinente ? Pourquoi utiliser une vidéo alors que le sujet n’en a pas vraiment besoin ?
La quantité des médias et le poids cumulé doivent être considérés sur chaque page afin de respecter ces critères de l’éco conception.
Comment optimiser le poids de ses images
Depuis quelques années, l’optimisation des images pour le web est devenue un facteur important d’amélioration d’un site internet. Pour les performances & la vitesse d’affichage, il est suggéré de mettre en place des outils de compression et d’optimisation. Dans le cas d’écoconception d’un site web, il est primordial et même obligatoire de mettre en place cette politique. Les médias sont responsables jusqu’à 60% du poids d’une page web en moyenne et de l’augmentation des requêtes HTTP, 2 des 3 indicateurs de notre formule d’écoconception et de l’Eco-Index. Mais optimiser ses images, qu’est-ce que ça veut réellement dire ?
Les formats d’images bitmaps (images à pixels) tels que le JPEG et le PNG proposent des niveaux de compression. Cette compression permet de réduire le poids de l’image selon le niveau choisi. L’inconvénient est que plus le niveau de compression est élevé, plus la qualité de l’image est détériorée. Sur le web, une image de mauvaise qualité n’offre pas une bonne expérience utilisateur. C’est pourquoi il est nécessaire de trouver le bon rapport entre poids/qualité pour respecter les critères de l’éco-conception.
L’optimisation peut être réalisée avec des outils en ligne et des modules WordPress d’automatisation de la tâche. Voici quelques exemples de ces outils :
- Imagify.io & son module WordPress
- Smush
- Tiny JPEG & PNG
Quels formats d’images choisir pour l’éco-conception web ?
Le choix du format d’une image a toujours été un sujet important pour la conception d’un site internet. Choisir un format en particulier était avant tout motivé par rapport à leurs avantages respectifs. Pour l’écoconception web, il est nécessaire de prendre en compte les critères d’optimisation et de poids de l’image en fonction du format.
Les formats d’images bitmaps standards
• Le format JPEG (Joint Photographic Experts Group)
C’est un format standard qui est devenu universel et lisible par n’importe quel logiciel de traitement d’images. C’est le format le plus répandu sur le web. Il a l’avantage d’être supporté par tous les navigateurs. Il ne supporte pas la transparence mais présente un taux de compression satisfaisant pour réduire son poids. Ce taux de compression peut également être un désavantage quand celui-ci détériore la qualité et le rendu de l’image.
• Le format PNG (Portable Network Graphics)
C’est un format ouvert qui a été instauré pour remplacer le format GIF. À l’instar du JPEG, c’est un standard du web supporté par tous les navigateurs. Il a lui l’avantage de supporter la transparence mais présente un taux de compression faible pour réduire son poids. Il peut donner une image de bonne qualité mais son poids compressé peut remettre en cause son intégration sur une page web.
Le WEBP, ce nouveau format optimisé et créé pour le web
• Le format WEBP
Le WEBP est un format d’image matricielle créé par Google dans le but de remplacer les formats standards. L’objectif de ce celui-ci est de proposer le même rendu que ces derniers avec un poids réduit allant jusqu’à 30% plus léger. Son désavantage premier étant sa faible histoire. Beaucoup de navigateurs actuels ne proposent pas son support, notamment Internet Explorer selon le site caniuse.com.
Les images vectorielles, un ami de l’éco-conception
Le format vectoriel majoritairement supporté sur le web est le format SVG (Scalable Vector Graphics). L’avantage de l’emploi des images vectorielles est qu’elles sont nettement plus légères une fois optimisées que les photos et images bitmaps standards. Il faut cependant prendre en considération que les images vectorielles ne remplaceront jamais les images standards. Une image vectorielle est souvent une illustration graphique. Alors quand le contenu d’une page est, par exemple, un lieu touristique, il est difficile d’imaginer l’emploi d’une image vectorielle pour illustrer le propos.
Pour notre site internet écoconçu www.logitourisme.com, nous avons pris la décision en majorité de nous séparer des formats standards bitmaps au profit du format vectoriel SVG raisonné. Nous avons constaté une nette baisse du poids moyen des pages et une hausse des performances d’affichage. Force est de constater que ce format est un énorme avantage pour l’écoconception d’un projet web.
Finalement, quelles solutions pour les formats d’images ?
Si le contenu de votre site internet vous permet d’imaginer un design basé sur des images illustratives vectorielles, vous pouvez utiliser le format SVG pour l’éco-conception de votre site internet. Il respectera totalement les critères d’analyse et d’évaluation de l’éco-conception web.
Dans d’autres cas, il faudra vous rabattre sur les autres formats cités. La meilleure solution serait d’offrir le support du WEBP et une solution de repli aux standards JPEG ou PNG quand le navigateur ne supporte pas le premier, fonctionnalité qu’offre le module WordPress Imagify. Cette démarche permettrait d’optimiser le rendu et le poids d’une page, tout en respectant la compatibilité avec tous les navigateurs et l’accessibilité du site internet. Car l’éco-conception web c’est également respecter les standards de la RGAA, en rendant accessible le même contenu à tout le monde.
Supprimer les métadonnées superflues d’une image
Les EXIF, qui signifie “Exchangeable Image File” ou fichier d’échange de données, sont un ensemble d’informations relatives à chaque image. Ces données sont générées automatiquement par l’appareil photo et elles sont stockées dans le format de l’image.
Les données EXIF peuvent être nombreuses, jusqu’à 350 données différentes pour une même image. Elles rajoutent du poids non-indispensable dans le cas d’un affichage sur internet et leurs suppressions allègent le poids.
C’est pourquoi il faut envisager de supprimer ces métadonnées. Voici quelques exemples pour vous aider dans cette démarche :
Lazyloading, et comment optimiser l’affichage des images sur un site internet éco-conçu
Le lazyloading est une méthode qui permet d’améliorer et d’optimiser les temps de chargement des sites Internet en incluant les images et les vidéos. Lors de la consultation d’une page web, le navigateur charge toutes les ressources nécessaires pour afficher la page. Ils sont alors chargés, même s’ils ne se trouvent pas dans la zone de visualisation appelée viewport. Grâce au « chargement paresseux », le navigateur charge uniquement les médias et les autres données lorsqu’elles apparaissent dans le « viewport » en faisant défiler la page notamment.
Cette technologie permet un chargement synchrone des ressources nécessaires. Les ressources non-visibles sont donc chargées à l’action de l’utilisateur, ce qui optimise les performances d’affichage et des requêtes HTTP.
Conclusion
L’emploi d’images dans un site internet écoconçu n’est pas à prendre à la légère. Elles représentent, à elles seules, un impact important sur l’écoconception d’une page web. Il est nécessaire de prendre en compte tous les points évoqués précédemment.
