Je t’aime, moi non plus…

Les images et l’éco-conception

Mis en ligne le : 20 décembre 2023

Un sujet épineux

Lorsque l’on souhaite créer un site éco-conçu, ou refondre l’existant pour le rendre plus sobre, se pose nécessairement la question des images.
Ont-elles encore leur place sur le site ? Comment peuvent-elles être optimisées ? Quel format faut-il privilégier ?

Nous avons décidé de vous aider à mieux comprendre le sujet opaque qu’est celui du poids et de la taille des images sur le web. Nous vous ferons part également des bonnes pratiques à toujours garder en tête. Nous avons essayé de ne pas trop rentrer dans la technique afin de rendre cet article digeste quitte à faire des approximations. Bonne lecture !

Définitions

Pour débuter, un petit tour des définitions, et notamment des formats, s’impose.

JPEG

Format JPEG (bitmap)

JPEG (Joint Photographic Experts Group), aussi dit JPG, est un format de photos numériques constituées de pixels. Le format JPEG est généralement le format le plus recommandé quand il s’agit de partager des photos très détaillées sur un site Internet.

Bon à savoir : l’effet de transparence sur le fond n’est pas possible sous ce format.

PNG

Format PNG (bitmap)

Au même titre que le JPEG, le format PNG (Portable Network Graphic) utilise une grille de pixels pour représenter l’image. Il permet notamment de prendre en charge des photos, logos et illustrations ayant un fond opaque, transparent ou semi-transparent. Avec le JPEG, le PNG fait partie des formats les plus répandus sur le web.

SVG

Format SVG (vectoriel)

SVG, pour Scalable Vector Graphics, correspond à un format de fichier vectoriel, contrairement aux autres formats. C’est-à-dire que les éléments graphiques ne sont pas construits grâce à des pixels mais grâce à des formes, points et vecteurs. Il permet un redimensionnement illimité de l’image sans perte de qualité.. Enfin, sachez que le format SVG est idéal pour les icônes et les illustrations simples.

WEBP

Format WebP (bitmap)

C’est le format qui a été développé par Google afin de proposer des images plus optimisées et plus légères pour le web. Effectivement, une réduction du poids des images participe, parmi d’autres leviers, à l’optimisation des performances d’une page web, ce qu’encourage Google. Il est tout à fait possible d’enregistrer une image sous WebP depuis les logiciels qui le permettent.

Il existe aussi le format AVIF (pour AV1 Image File Format). Celui-ci est assez récent et encore très peu répandu sur le web car tous les navigateurs ne le comprennent pas encore. Nous ne nous étalons pas sur ce format ici mais il sera probablement utile de s’y intéresser dans les années à venir puisqu’il a un véritable potentiel en termes de compression.

Le tramage

Tramage

Rien à voir cette fois-ci avec un format d’image. Il s’agit d’une technique permettant de donner l’illusion que certaines couleurs sont présentes sur un visuel alors qu’il s’agit simplement d’un effet d’optique : les pixels accolés apportent une nuance à un autre pixel. Le tramage limite fortement la palette de couleurs disponibles afin que les images soient plus légères, en privilégiant cette illusion colorimétrique. Le tramage répond généralement à un parti pris esthétique mais il peut aussi permettre d’alléger le poids d’une image bitmap. En tramant une image, il y a automatiquement une dégradation de la qualité et de la précision de celle-ci.

Bon à savoir : il existe plusieurs options de tramage, qui dégradent plus ou moins l’image pour en ressortir un style plus ou moins marqué.

Images sur un site web, quel fonctionnement ?

Maintenant que nous sommes au clair avec les définitions, place à l’usage des images sur les sites web.

Comme tout élément présent sur un site Internet, une image génère de la pollution numérique. À la fois du côté du serveur, qui stocke toutes les données, mais aussi du côté du navigateur, qui doit télécharger chaque ressource depuis le serveur jusqu’au terminal en passant par tous les éléments constituant le réseau.

Lorsque les ressources (images, CSS, JavaScript, polices de caractères, …) sont téléchargées, le serveur informe le navigateur s’il doit stocker ces fichiers en cache. Si c’est le cas, tous ces fichiers vont être conservés sur le terminal de l’utilisateur jusqu’à expiration. Cette expiration doit être configurée du côté du serveur et va permettre d’économiser autant de requêtes que de fichiers déjà téléchargés lors des précédentes consultations.

Sans mise en cache, toutes les ressources doivent être téléchargées à chaque nouvelle page. Imaginez le nombre de requêtes qui pourraient être évitées…

Nous pourrions vous dire que pour avoir un site éco-conçu il ne faut pas y mettre de visuels, mais ce ne serait pas réaliste d’en déduire ça. Nous travaillons dans l’UX, nous savons que des visuels (photo, icône, illustration) sont utiles à la bonne expérience utilisateur. D’ailleurs, peu de sites ne contiennent pas d'images : cela apporte du mouvement, du contexte ou encore de l’esthétisme aux pages.

Il existe 3 niveaux d’éco-conception au sujet de l’intégration d’images sur un site :

Application des bonnes pratiques de base

Il y en a 4 principales. Nous vous les détaillons ci-dessous,

Réflexion autour de l’utilité et de la taille des images

C’est un point que nous défendons beaucoup à l’Agence : chaque image intégrée à la conception et au maquettage d’une page doit résulter d’une réflexion poussée quant à son utilité pour l’utilisateur et quant à sa place (taille) dans le propos,

Absence de visuel

Comme précisé ci-dessus, c’est un niveau peu compatible avec un design attractif. En termes d’éco-conception cela peut être top, en termes de taux de conversion, moins. Ce n’est donc, encore une fois, pas ce que nous allons vous recommander ici.

Nous vous proposons ici de débuter votre travail d’éco-conception de vos images par les bonnes pratiques de base.

Les bonnes pratiques

Avant d’entrer dans des comparatifs précis, voici quelques règles de base pour limiter le poids des visuels intégrés à un site :

Réduire la taille des images

Le poids d’une image augmente exponentiellement par rapport à sa taille. Pour cela, s’astreindre à une taille d’affichage de 960px dans les pages du site permet d’éviter des visuels très lourds sur de grandes résolutions d’écrans. De plus, nous préconisons à nos clients de redimensionner leurs images à un format de 1920px et une définition de 72dpi dans le Back Office afin d’avoir suffisamment de matière pour les retraiter ensuite pour l’affichage.

Optimiser leur poids

Comme nous vous l'expliquions dans la partie “définitions”, selon le format de l’image, il est possible de compresser une image, c’est-à-dire de l’alléger, sans pour autant en dégrader le rendu. Certains formats s’y prêtent plus que d’autres. Idéalement, avant de mettre en ligne votre visuel, pensez à le compresser, surtout si rien n’est automatisé sur votre back-office. Il est très simple de trouver des outils en ligne. Pour les Mac, il existe le logiciel Imageoptim. Vous pouvez aussi ajouter une extension à votre CMS (WP Smush), qui se chargera d’optimiser tous vos visuels. Sachez d’ailleurs, que généralement, les CMS font un traitement des visuels automatiquement et sans dégradation mais votre action en amont reste complémentaire. D’autres solutions de compression d’images sont à retrouver plus bas.

Prévoir un process du côté du serveur pour varier les tailles et formats des images

Il est inutile de charger sur un smartphone une image à la taille à laquelle elle est affichée sur un écran d’ordinateur. En développant votre site, prévoyez plusieurs tailles d’images pour chaque appareil. Si vous prévoyez une image pleine largeur sur la page, nous recommandons de prévoir jusqu’à 5 tailles différentes pour cette même image. Si vous utilisez une image en tant que “vignette” d’un article par exemple, 3 tailles devraient suffire. Encore une fois, les CMS tels que WordPress le font généralement aussi de façon automatique, ce n’est juste pas toujours aussi optimisé. Il en est de même pour le format : vous découvrirez plus bas que le format WebP est peut-être le plus recommandé. Pour autant, il faut prévoir un même visuel au format JPEG, par exemple, si jamais le navigateur utilisé par un utilisateur ne comprend pas le format WebP, notamment sur les terminaux vieillissants.

Respecter l’ordre redimensionnement, (tramage) et compression

Si vous avez paramétré du côté du serveur que chaque image intégrée au site est ensuite formatée à différentes tailles, ne prévoyez l’optimisation qu’une fois le redimensionnement effectué ainsi que le tramage (s’il y a). Ces étapes doivent donc être prises en charge du côté du serveur. Nous avons fait le test à l’Agence : redimensionner et compresser à différents formats une image tramée décuple son poids.

Rappel : s’intéresser à l’éco-conception appliquée aux images, c’est une chose. Mais n’oubliez pas que les images que vous publiez doivent, au choix, vous appartenir ou être libres de droits. C’est une question d’éthique et cela vous épargnera quelques coûts imprévus...

Quel est le format le plus léger ?

PNG, WebP, JPEG, SVG, que faut-il choisir ?

Notre objectif est désormais d’aller plus en profondeur encore que les bonnes pratiques de base afin d’être en mesure de faire des choix éclairés sur les formats de visuels à intégrer sur les interfaces web.

C’est là que notre développeur Front-End, Manu, entre en jeu. Il a réalisé un comparatif du poids des différents formats, pour une même image. On peut en tirer quelques conclusions. Bien sûr, il faut prendre du recul sur les résultats puisque les tests ont été réalisés uniquement sur quelques visuels.

1ère étape : le poids d’une photo

Contrairement à l’illustration, la photo ne peut pas prendre tous les formats de visuels. Le format SVG n’est pas adapté. À savoir que l’on a tendance à privilégier le format JPEG pour les photos de très haute qualité et très détaillées.

Après des tests sur une photo, il semblerait que les formats JPEG et WebP optimisés sont équivalents en termes de poids d’une même image. Le PNG et JPEG tendant à disparaître au profit du WebP, Manu, notre lead développeur front-end, recommande de privilégier le format WebP, optimisé par essence.

Voir le tableau de comparatif sur les photos

2nde étape : le poids d’une illustration

L’avantage de l’illustration, c’est qu’elle peut être mise sous tous les formats : PNG, JPEG, WebP ou encore SVG (si l’illustration est simple), pour un même rendu.

Même après optimisation, le format WebP opaque reste le plus intéressant, notamment dans le cas d’une illustration complexe. Attention, ce n’est pas vrai si un tramage est appliqué : le WebP réagit mal au tramage.

Plus l’illustration (simple) est grande et plus le format SVG optimisé devient intéressant par rapport au format WebP.

Dans son comparatif, Manu a également comptabilisé le poids total des images sur l’espace serveur. Cela correspond à la somme des poids d’une même image, formatée sous 4 tailles différentes. Car, comme nous l’avons partagé plus tôt, pour rendre un site responsive au device utilisé, les visuels sont générés en plusieurs tailles. La taille la plus adaptée sera celle affichée. Ce poids sur l’espace serveur est intéressant à connaître et nous pouvons noter que de ce point de vue là le format SVG est le plus léger. Pour autant c’est plutôt un élément indicatif puisqu’encore une fois, ce n’est pas l’espace serveur qui émet le plus de CO2.

Voir le tableau de comparatif sur les illustrations

3ème étape de ce comparatif : le tramage.

Comme expliqué précédemment, le tramage est souvent utilisé dans le but de proposer un esthétisme marqué. Mais il peut aussi être un atout pour optimiser le poids de vos images. Et dans le cas que Manu a testé, seul le format PNG avec un tramage “bayer” et optimisé permet de gagner en poids sur une image/photo optimisée.

Attention à ne jamais oublier d’optimiser une image une fois que celle-ci a été tramée, sinon l’image tramée s’avère bien plus lourde que l’image originale.

Voir le tableau de comparatif sur le tramage

Alors, qu’est-ce qu’on en retient ?

De manière générale, le format WebP est le format générant le plus de bénéfices, mais le format AVIF est à surveiller.

Si vous désirez véhiculer une image de sobriété en appliquant un tramage sur vos images, le PNG semble être le format le plus indiqué.

Enfin, n’oubliez pas d’appliquer autant que possible les bonnes pratiques mentionnées précédemment. Les performances web de votre site n’en seront que meilleures.

Rappel : Avant d’intégrer votre image dans le back-office, pensez à la renommer sur votre ordinateur avec un nom pertinent. Cela jouera en faveur de votre référencement naturel auprès de Google.

Quelques outils pour aller plus loin

Nous n’allions pas vous laisser sans vous recommander quelques ressources utiles pour vos conversions et optimisations.

Dither It!

Cet outil OpenSource permet d’appliquer 2 types de tramage sur vos images : le Bayer et Error Diffusion, en choisissant la palette de couleurs à appliquer.

Découvrir Dither It!

ImageOptim

ImageOptim compresse vos images gratuitement pour en limiter le poids. Grâce aux paramètres vous pouvez personnaliser le niveau d’optimisation.

Découvrir ImageOptim

Squoosh

Il s’agit d’un outil en ligne 2 en 1 : il peut vous permettre de compresser vos images, selon vos paramètres mais également de les convertir dans un autre format.

Découvrir Squoosh

Adobe Photoshop

C’est le logiciel de base pour le traitement des images : vous pouvez aussi bien les modifier, leur appliquer des filtres ou encore les convertir aux différents formats.

Découvrir Photoshop

Envie d’enclencher une démarche d’éco-conception ?

À l’Agence LunaWeb, nous accompagnons de plus en plus de clients dans leurs projets en lien avec la sobriété numérique. Qu’il s’agisse d’un audit d’éco-conception, de la refonte d’un site Internet, de la conception UX/UI d’une future interface ou encore de la formation et sensibilisation à l’éco-conception d’une équipe, notre accompagnement se veut sur-mesure.

Partager votre projet