Comment être éco-responsable sur son site web

Éco-conception
Maintenant, il faut agir !

Vous savez maintenant ce qu'est l'éco-conception dans ses grandes lignes (relire l'article sur qu'est ce que l'éco-conception dans le web). Maintenant, il faut agir ! Quoi faire et comment faire pour réduire l'énergie utilisée par mon site web.

KRISKEN Internet: un gouffre énergétique

Une petite comparaison va nous permettre de focus sur la consommation énergétique des grands secteur bien connus pour être extrêmement gourmands: le secteur industriel consomme 311.7 TWH. On parle ici en Tera Watt-heure, c'est à dire en milliard de watt-heure. Par comparaison, le secteur résidentiel et le secteur des transports consomment eux respectivement 498.5 TWH et 501.1TWH. Clairement le transport apparaît comme un vrai problème parce qu'on sait que son énergie est fossile, donc limitée, et que tout le monde a besoin de mobilité donc de cette énergie.

On estime qu'internet consommerait lui 1500TWH…

Si internet était un pays, il serait le 3ème plus gros consommateur d’électricité au monde avec 1500 TW/H par an, derrière la Chine et les États-Unis. Au total, le numérique consomme 10 à 15 % de l’électricité mondiale, soit l’équivalent de 100 réacteurs nucléaires !!
(src: https://www.fournisseur-energie.com)

comparaison de la consommation d'énergie des secteurs les plus gourmands par rapport à internet

Eco-responsable Comment devenir éco-responsable ?

Bref, le problème semble assez peu solluble du point de vue de la consommation… Et pourtant on peut agir ! Il est de notre juste éco-responsabilité de limiter au maximum cette consommation d'énergie.

La consommation d'énergie électrique est essentiellement dû à l'utilisation de gigantesque parcs de serveurs climatisés. Si internet paraît si immatériel, en fait il n'en est rien. Chaque parc contient des dizaines, voire des centaines d'armoires renfermant elles-mêmes des dizaines de disques durs. Ces disques durs stockent toutes nos données, et ils forment ensemble ce qu'on appelle le "big data". En réalité, tous nos sites web sont sur ces disques durs et en plusieurs exemplaires en plus en cas de panne de l'un d'entre-eux !

Comment intégrer le concepteur de site web dans cette boucle vertueuse de l’éco-conception ?

À la vue de ces informations, on peut se demander comment intégrer le concepteur de site web dans cette boucle vertueuse de l’éco-conception ? Nous allons voir qu’elles tournent essentiellement autour d’une seule idée: soulager la consommation des serveurs web.

Sachant cela, on peut rapidement identifier des solutions largement à notre portée: on va réduire au maximum la quantité d'octets utilisés pour afficher notre site internet. Et cela commence par diminuer le poids des fichiers "images". Ici, on parle de poids, pas de quantité, même si c'est sans doute une erreur car l'octet est une unité de taille pas de poids… passons là-dessus.

Si les images sont parmi les éléments les plus lourds d'un site web, ce sont aussi les plus faciles à alléger. Avec un bon logiciel de traitement d'images pour le web ("chut chut pas de marques") vous avez tous les outils en main pour le faire. 3 solutions différentes co-existent et sont à combiner pour parvenir à faire de ses visuels des éléments performants de son site web.

Format de fichier Optimiser ses images pour le web en utilisant le bon format de fichier

On distingue plusieurs extensions de fichiers pour les images. Parmi eux:

Le .jpg
Le .gif
Le .png

Chacun d'eux possède ses propres caractéristiques particulières. On ne choisit donc pas le format de fichier au hasard. Lorsque j'exporte pour le web avec un logiciel d'édition d'image, il est impératif d'utiliser le bon format de fichier. On peut ainsi optimiser la qualité du visuel pour en réduire au maximum son poids, lénergie qu'il faut pour le cahrger et donc son impact environnemental.

Le .jpg pour la photographie

Le premier format de fichier dont on va parler est le .jpg. Le format .jpg (prononcer "jipègue") est adapté à des visuels de type photographie car il ne nuit pas aux couleurs du fichier. C'est un format d'image numérique compressé. On dit "compressé" car il réduit la quantité d'octets pour le même affichage. On lui retire des données inutile pour l'affichage sur le web. En traitant son .jpg avec un logiciel d'édition, on peut même réduire encore sa qualité pour en diminuer le poids, tout en conservant bien sûr une qualité visuelle optimale.

Le .gif pour l'animation image par image

En deuxième sur cette liste, on va trouver l'export en .gif qui ne s'utilise que si notre visuel est une animation image par image. Aucun autre fichier ne devrait être en .gif ! Les fichiers .gif disapraissent de plus en plus des sites internet, au profit des vidéo. Non pas qu'elles soient plus légères, mais elles sont bien plus qualitatives. Grâce aux connexions web très rapides, de nos jours on va exploiter le potentiel video plus que l'image par image pour animer un site web. Pour dire la vérité, il y a longtemps qu'on utilise plus le .gif dans le web, exception faite des e-mailings et des newsletters car le poid du .gif reste plus léger que celui de la vidéo.

Le .png pour la transparence

Enfin il y le format .png, très connu également. Le format .png sera à utiliser si vous avez besoin d'un visuel contenant de la transparence ! En effet, l'avantage du .png c'est qu'il comprend la transparence, contrairement au .jpg qui utiliserait une couleur opaque (blanc par défaut) à la place de toute transparence.

À noter qu'on distingue le .png-8 du .png-24. Le .png-24 lui comprends tous les niveaux de transparence de 0 à 100%, alors que le .png-8 ne comprend que le complètement opaque ou le complètement transparent.

Eco-responsable Utiliser les nouveaux formats de fichier comme le WrbP et le SVG, plus économiques en octets

Des formats de fichier plus économiques en octets ont fait leur apparition ces dernières années. En ce qui concerne les formats vectoriels, le plus extraordinaire d'entre eux est le format SVG. Et pour les pixel, nous allons parler du format .webp. Ces formats de fichiers réduisent drastiquement le temps de chargement de vos pages web et donc ses performances sur la toile. Quand on sait que Google, depuis novembre 2022, favorise la visibilité des pages web notamment celles qui utilsent ces formats de fichiers, on a tout intérêt à optimiser nos visuels avec !

Le format SVG, qu'est ce que c'est ?

Le format .svg, est un format de type vectoriel, mais utilisable dans un site web ! Et les avantages de ce format sont multiples:

Pas de pixel, donc pas de limite de taille
Son homotétie: pas de déformation possible de l'image
Un poids très réduit selon la simplicité des vecteurs (attention il y a une limite)
Ils comprennent la transparence
Ils peuvent être animable en CSS, voire comme une animation vidéo, mais vectorielle

Ce format mathématique permet une grande variété d'utilsation: pour des logos par exemple, ainsi on n'abime jamais l'image de marque de la société. Très pratiques aussi pour les pictogrammes, qui sont souvent de petits formats moins faciles à maîtriser. Les intégrateurs web pourront les manipuler grâce au .CSS, avec des effets ::hover ou de ::focus sans jamais pixelliser les visuels.

Le format WebP

Initier par Google en 2010, le format .webP est prévu pour minimiser le poids des fichiers .jpg et .png. WebP posssède donc les même propriétés que le JPG et le PNG ensemble : les capacités de couleur du JPG (16.2 millions) et les compétences de transaprence du PNG de 0 à 100%.

On peut générer un fichier .webP grâce à ©Adobe Phostoshop depuis 2023. Attention cependant, lorsque vous cherchez à optimiser une image, le format .webP n'est pas accessible via l'outil d'export pour le web. Il faut prévoir par avance, et si besoin, la perte de qualité, puis l'enregistrer-sous directement. C'est seulment là que vous aurez accès au formt .webp. Autre inconvénient, le format étant relativement récent, certains navigateurs et CMS ne savent pas l'afficher comme Safari9.0 ou WordPress 5.2. Pensez donc à les mettre à jour pour l'utiliser.

CONTACT KRISKEN

Sébastien 'Krisken' Gaudet (EI), accessible et très réactif.
Je reste en contact très régulier avec mon client pour un suivi global de son projet Web et Print