• Écoconception
• Kirby

Utiliser les images en écoconception

Publié le 28 avril 2025

Si vous vous intéressez à l’écoconception web, on vous a sûrement déjà mis en garde contre l’utilisation intensive d’images. En effet, les images – et les vidéos encore plus – contribuent très fortement à l’augmentation moyenne du poids des pages web que l’on observe depuis plusieurs années.

Pour un site ou un service web écoconçu, la réduction du poids final des données transférées est l’un des leviers de limitation d’impact. On va chercher à réduire le poids de tous les fichiers qui composent le site (html, css, javascript…), mais le gain le plus important se situe souvent au niveau des images et des vidéos.

À titre indicatif, de façon générale : un texte pèse moins qu’une image, une image pèse moins qu’un audio et un audio pèse moins qu’une vidéo.

Référentiel général d’écoconception de services numériques
RGESN, critère 4.7 - Nouvelle fenêtre

Cet article se concentrera sur les images : peut-on utiliser des images en écoconception ? comment les utiliser ? comment réduire leur poids et donc leur impact ? Je proposerai des pistes de réponse à ces questions.

Peut-on utiliser des images en écoconception ?

La réponse courte : OUI.

Rien n’est interdit lorsqu’on adopte une démarche d’écoconception. Cependant, chaque choix doit être questionné au regard de son utilité, de son sens dans un contexte donné, et de son impact environnemental.

Les images sont un support d’expression riche, et contribuent à faire circuler les informations et les émotions.

Pour décider d’en utiliser ou non, on peut se poser plusieurs questions.

L’image apporte-t-elle une information utile ?

La réponse dépend du contexte, et non de l’image en elle-même. Si elle apporte une information utile, alors l’image a sa place.

Quelques exemples d’image qui apportent une information :

• La photo d’une manifestation dans un article d’actualité aide à contextualiser l’information,

• La photo d’un produit sur la page dédiée d’un site e-commerce facilite la décision d’acheter ou non,

• Un schéma ou un graphique dans un article scientifique clarifie une information complexe,

• Le dessin d’un oiseau sur un site d’identification des oiseaux aide à la comparaison visuelle.

Et il y a bien sûr beaucoup d’autres contextes où les images apportent une information utile.

L’image transmet-elle une émotion ?

Mais je ne voudrais pas prôner une vision purement utilitariste des images (ma formation en arts visuels ne me le permettrait pas) !

Parfois les mots nous manquent, ou nous paraissent trop limités, et les images sont un formidable vecteur de sens et d’émotion. Le web permet de les faire circuler, et c’est très bien comme ça.

Et quand je parle d’émotion, je pense d’abord aux images qui nous dérangent, et qui provoquent un décalage intérieur, un mouvement.

Et si l’image ne transmet ni information, ni émotion ?

À l’inverse, il y a des contextes où l’image n’apporte pas d’information particulière, et ne provoque aucun mouvement intérieur.

Exemples d’images qui n’apportent aucune information :

• La photo d’un microscope sur la page de présentation d’un laboratoire,

• La photo d’un groupe de personnes inconnues dans une salle de classe sur la page de présentation d’une formation,

• La photo d’un cœur dessiné sur le sable sur le site d’une agence de tourisme.

Dans ces cas-là et bien d’autres, l’image est plutôt utilisée par facilité, pour structurer une composition trop générique. Et le plus souvent, elle ne réussit qu’à renforcer un sentiment de vu et revu, et ne vous fera donc pas sortir du lot.

Comment réduire le poids des images utilisées ?

Si on décide d’utiliser une ou plusieurs images, on peut mettre plusieurs choses en place pour réduire le poids des fichiers.

Réduire la taille physique

Les sites avec une ou plusieurs photos pleine largeur sont devenus nombreux depuis quelques années, même si la tendance tend à décroître doucement.

Or la taille physique d’une image matricielle ¹ est le levier le plus important pour réduire son poids. En réduisant sa taille, on diminue le nombre de pixels contenus dans l’image, et donc le poids du fichier.

On a tendance à penser qu’une très grande image aura plus d’effet. Mais si l’image est trop générique, on retrouvera un sentiment de vu et revu.

Une image marquante en petite taille, dans une disposition dynamique, aura souvent plus d’impact visuel. Le design regorge d’outils pour rendre une composition visuelle intéressante : contraste, proportions, typographie… L’image peut s’insérer dans ce travail sans le supplanter.

Lorsque l’utilisation d’une grande image est pertinente, par exemple pour la photo d’un produit, on peut afficher une miniature de l’image, et charger le grand format uniquement via une action de l’utilisateur.

Adapter la direction artistique

Choisir un petit format d’image dans une composition relève déjà de la direction artistique. Mais on peut aussi agir sur d’autres aspects.

En choisissant des illustrations vectorielles simples délivrées au format .svg, on obtiendra souvent des fichiers nettement plus légers. C’est par exemple le cas dans l’agenda de La bib’.

Si on utilise des images complexes, on peut tenter certains traitements graphiques pour réduire le volume d’informations contenues dans le fichier :

• réduire le nombre de couleurs

• retirer l’arrière-plan s’il n’est pas utile,

• réduire les détails.

Mais il n’y a pas de formule magique, et appliquer des effets de “tramage” ne suffira pas à rendre votre image plus légère, comme le raconte très bien HTeuMeuLeu. Les gains imputables à ce type de traitement sont bien moindres par rapport à ceux de la réduction de la taille ou au choix du mode de compression le plus efficace.

Optimiser les fichiers finaux

Il existe plein d’articles sur le sujet donc je ne vais pas entrer dans les détails, mais une fois qu’on a choisi la bonne taille d’affichage et éventuellement traité l’image, on peut encore optimiser et compresser les fichiers fichiers finaux.

Quelques éléments :

• Si la taille d’affichage est de 300px de large, le fichier ne devrait pas dépasser 600px de large (pour prendre en compte les écrans Retina ou 4k).

• Si la taille d’affichage varie selon la largeur de l’écran, on peut utiliser les attributs srcset et sizes pour charger le meilleur fichier selon le cas (Mdn web docs, en anglais).

• On peut aussi utiliser plusieurs éléments <source> pour charger un fichier .webp ou .avif quand c’est supporté par le navigateur du visiteur.

En utilisant les deux formats, on assure une compatibilité maximale avec les navigateurs, mais on obtient des fichiers bien plus légers à qualité égale au format .avif.

L’un des avantages de Kirby CMS (mon outil de construction de site privilégié), ce sont ces fonctions prévues pour gérer les images, qui me facilitent grandement la vie !

À titre d’exemple, voici comment je génère les images de couverture sur La bib’ (fiche du livre Chavirer de Lola Lafon – lisez-le !) :

<picture>
  <source srcset="<?= $cover->srcset('cover_avif') ?>" width="<?= $cover->thumb('cover')->width() ?>" 		 
  height="<?= $cover->thumb('cover')->height() ?>" type="image/avif">
  <source srcset="<?= $cover->srcset('cover_webp') ?>" width="<?= $cover->thumb('cover')->width() ?>" 
  height="<?= $cover->thumb('cover')->height() ?>" type="image/webp">
  <img alt="<?= $cover->alt() ?>" src="<?= $cover->thumb('cover')->url() ?>" srcset="<?= $cover- 
  >srcset('cover') ?>" width="<?= $cover->thumb('cover')->width() ?>" height="<?= $cover->thumb('cover')- 
  >height() ?>">
</picture>

La balise <picture> me permet de prévoir plusieurs <source> avec des formats différents. Le navigateur choisira le premier qu’il supporte. Pour chaque <source> – et pour la balise <img> utilisée en derniers recours – je prévois aussi plusieurs tailles d’image, pour gérer les différentes résolutions d’écran.

Avec les fonctions srcset() et thumb(), fournies par Kirby, j’appelle des paramètres définis dans ma configuration :

'cover'=> [
'1x'=> ['width'=>300],
'2x'=> ['width'=>600]
],
'cover_webp'=> [
'1x'=> ['width'=>300, 'format'=>'webp', 'quality'=>65],
'2x'=> ['width'=>600, 'format'=>'webp', 'quality'=>65]
],
'cover_avif'=> [
'1x'=> ['width'=>300, 'format'=>'avif', 'quality'=>50],
'2x'=> ['width'=>600, 'format'=>'avif', 'quality'=>50]
]

Dans cet exemple, la largeur affichée de l’image (300px) ne varie pas en fonction de la taille d’écran. Je gère donc juste 2 tailles, pour prendre en charge les écrans Retina ou 4k.

Le paramètre 'quality' me permet de tirer parti du meilleur de chaque format.

Mais appliquer ce type de configuration avec les meilleurs résultats nécessite d’avoir cadré assez précisément la nature des images utilisées et leur(s) contexte(s) d’utilisation. Avec une trop grande variété d’images, il est probable qu’on doive faire un choix entre une perte de qualité sur certaines ou un manque d’optimisation pour d’autres.

Conclusion

Il est donc tout à fait possible de tirer tout le bénéfice des images en écoconception web. Comme pour tout le travail de conception, il s’agit surtout de se poser les bonnes questions, et de faire des choix.

• L’utilisation d’une image est-elle pertinente dans ce contexte ?

• Si on utilise une image, comment réduire son poids final ?

J’ajouterais qu’en tant que concepteurice d’interfaces, il est crucial de tout faire pour que l’ajout de nouvelles images par les contributeurices se fasse dans les meilleures conditions. Il s’agit de trouver le bon équilibre entre contrainte (limitations posées lors de l’upload) et adaptabilité (prévoir plusieurs cas d’usage, autoriser certains contournements). C’est ce qui permettra de maintenir la qualité et la démarche d’écoconception web sur le long terme.

Cet article et tous les articles de ce blog sont sous licence CC-BY-SA., nouvelle fenêtre