L’empreinte carbone des images sur le web

Nous avons parlé récemment de l’importance du choix des couleurs dans notre démarche d’éco-conception web. C’est d’après moi un élément important mais bien souvent difficile à optimiser car il fait partie intégrante de l’identité et de la charte graphique du site. C’est donc plus un choix qui revient à l’équipe marque qu’à l’équipe tech.

Sauf l’implémentation du mode sombre 🕶️
ça, c’est dans nos cordes et il faut le faire !  

Notre rôle ici en tant que designer sera donc plutôt de sensibiliser l’équipe marketing-communication sur le sujet. Et autant il peut être “facile” de prendre en compte cette contrainte de choix de couleurs à la création d’une nouvelle marque, autant pour une marque existante, il sera assez difficile de tout changer du jour au lendemain. Mais comme on dit, Rome ne s’est pas faite en un jour et la première pierre à tout changement est d’abord la prise de conscience. Donc en parler avec les personnes concernées est déjà une bonne première étape.

Il y a un autre élément UI dont je voulais vous parler et qui me paraît un peu plus “actionnable”, sans avoir à changer toute l’identité du site. Il s’agit des choix relatifs aux images. 

Le poids des images

Les images sont des fichiers relativement lourds qui ont un impact direct sur le bilan carbone d’une page et plus largement d’un site. 

Average bytes per page by content type
D’après le site HTTP Archive, les images représentent plus de la moitié du poids du web.

Plus un site est lourd, plus nous aurons besoin d’un gros serveur pour stocker tous les fichiers. Et plus la capacité du serveur est grande, plus grande est sa consommation d’électricité pour le faire fonctionner 24/7.

Mais ce n’est pas tout. Plus un site est lourd, plus le temps de chargement sur l’appareil de l’utilisateur sera long. Il faut que les données (ici en l’occurrence les images) voyagent depuis le serveur jusqu’à l’ordinateur ou le téléphone de l’utilisateur final. Et c’est comme pour les humains, essayez de relier un point A à un point B. Plus vous aurez de bagages à porter, plus vous mettrez longtemps à atteindre le point B. C’est pareil avec la donnée ! 

Et un site long à charger altère l’autonomie de la batterie, ce qui entraîne un besoin de recharger l’appareil plus fréquemment. Et donc in fine, plus d’électricité consommée. Bref, vous commencez à comprendre la boucle.

D’où la nécessité de repenser notre utilisation des images.

Comment repenser notre utilisation des images ?

Utiliser à bon escient

On connaît tou.te.s la citation de Confucius “une image vaut mille mots”. Certes. 

Mais comme nous l’avons appris dans l’article sur l’approche Marie Kondo que nous pouvons appliquer à nos décisions web, si nous voulons créer un web plus durable, nous devons prendre l’habitude de nous poser la question de la valeur de chaque image. Est-ce qu’elle apporte vraiment quelque chose à l’expérience utilisateur ? Est-ce qu’elle sert notre message ? Le rend-il plus facile à comprendre ? Contribue-t-elle à refléter l’image de la marque ? À rassurer le lecteur ? 

Nous connaissons tou.te.s des sites web utilisant des images de banques de données sans intérêt juste parce qu’un article, ça s’illustre. C’est comme ça que tout le monde fait, comme ça qu’on est censé faire et puis basta così ! Je ne remet pas du tout en question le pouvoir des images. Confucius a raison. Mais c’est comme tout selon moi, à trop les utiliser, on en réduit l’impact.

Prenons par exemple un site ou un blog traitant du bien-être. Vous pouvez être sûr.e que dans la plupart des cas, vous allez y trouver au moins une image de pierres empilées censées représenter la quiétude. C’est très joli mais est-ce qu’en tant que lecteur, ça vous fait encore quelque chose ? 

Est-ce qu’il n’y aurait pas une autre manière de susciter votre zénitude et votre envie de lire cet article ? Par exemple utiliser une illustration à la place de l’image ? Ou juste une citation zen dans une belle typo sur un fond en couleur ? 

L’idée ici est de questionner chaque image que l’on ajoute sur notre site. Et de voir si une alternative plus écolo ne pourrait pas tout aussi bien servir notre objectif.

Privilégier les illustrations vectorielles

Quand je propose de remplacer une image par une illustration, ce n’est pas un hasard. 

Les images vectorielles au format .svg sont beaucoup plus légères qu’une photo. Le site de mode Organic Basics est un super exemple en matière d’éco-conception (aussi bien pour leur site web que pour leur vêtements d’ailleurs). Ils ont créé une version “basse consommation” de leur site web sur laquelle ils remplacent toutes les photos de vêtements par des illustrations vectorisées. Voyez plutôt.

Vous noterez que les captures d’écran utilisées ci-dessous ont pour but de donner plus de force à mon propos 🤓

Site Organic Basics version normale
Site Organic Basics – version normale
Site Organic Basics version bas carbone
Site Organic Basics – version bas carbone

Dans cet exemple, la marque Organic Basics a fait le choix d’utiliser des illustrations noires sur fond gris. Ça peut paraître un peu triste mais on n’est pas obligés d’aller aussi loin. A nous de trouver la bonne balance.

Vous pouvez contribuer à créer un web plus respectueux de la planète en partageant cet article pour éveiller les consciences :)
Publié le
Catégorisé comme Agir

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *