6.1. Les images

Les images sont le type de ressources le plus utilisé sur le web d’après le rapport des archives http (Report: Page Weight et Report: State of Images). Le poids d’une page moyenne sur desktop était de 2174 Ko sur l’échantillon testé en janvier 2022, et le poids moyen des images transférées pour une page était de 958 Ko. Les images représentent ainsi en moyenne 44% du poids d'une page web en 2022 !

Redimensionner les images

Les photos et images que nous utilisons sont très souvent surdimensionnées. Une photo non redimensionnée, par exemple, a souvent une taille entre 2000 et 4000 pixels de largeur. C'est inutile car elle sera affichée sur une page web sur desktop à environ 700 ou 800 pixels de largeur. Non seulement l’image sera trop lourde, mais le navigateur fera un effort de calcul pour redimensionner l’image.

Il est donc important de retailler les images à minima selon la taille d'affichage maximale des utilisateurs (par exemple pour un grand écran d'ordinateur). Plus l'image est petite, plus je peux la redimensionner et plus elle sera légère. Privilégier donc dans son design des images de taille moyenne ou petite, plutôt que des images pleine largeur.

Les questions à se poser

Ai-je besoin d'une image pleine largeur ?
Quelle est la taille d'affichage maximale de mes utilisateurs ?
Puis-je repenser le design de ma page afin d'afficher mon image en plus petit sans faire de concession sur le graphisme ?

plus d'info

Choisir le bon format

Photo	Utilisez le format .jpeg ou encore .webp
Image	Préférez les formats vectoriels comme .svg au format .png lorsque cela est possible. Mais n’oubliez pas de minifier et optimiser le fichier .svg en utilisant des outils comme compressor.io Note : Si un fichier .svg est très complexe, il peut être plus lourd qu’un fichier .png. Il convient de faire des tests et de prendre la décision la plus pertinente.
Icone	Utilisez des glyphs quand c’est possible, ou icônes et styles CSS

Attention : le format webp n'est pas supporté par les navigateurs anciens. En juillet 2021, 2,3% des internautes français utilisaient encore des navigateurs ne prenant pas en charge les images webp (source : Statcounter), notamment :

les versions de Safari antérieures à juin 2020 (1,13%) ;
Internet Explorer (0,67%) ;
les versions de Firefox antérieures à janvier 2019 (0,36%) ;
les versions de Edge antérieures à janvier 2020 (0,07%).

Préférer les images vectorielles et glyphes

Les images vectorielles sont composées de formes géométriques tracées à l'ordinateur. Elles peuvent donc être agrandies à l'infini sans être jamais pixellisées.

Les images vectorielles et glyphes pèsent moins lourd que les photos. Or, il arrive souvent de voir des sites sur lesquels de grandes photos libres de droit montrent des personnes souriantes fixant l'utilisateur. Ces photos ne sont pas différenciantes et pèsent souvent lourd. Lorsque les images sont purement décoratives et n'apportent rien en termes d'information, privilégier le vectoriel ou explorer d'autres approches esthétiques.

Les illustrations vectorielles peuvent être graphiquement très différenciantes. Déclinées aux couleurs de l'organisation voire faites sur mesure, elles incarnent l'image de marque beaucoup plus fortement qu'une photo générique.

Exemple

Le site de l’exposition “Celtique ?” utilise des illustrations vectorielles en format SVG. Par exemple, le personnage seul en page d'accueil ne pèse que 17 Ko en SVG.

Illustration représentant un personnage avec un tee-shirt présentant un symbole celtique

Lorsqu’il s’agit de choisir des icônes de pratiques informatiques, privilégier des métaphores qui représentent de manière plus fidèle l’impact du numérique : “télécharger” plutôt que “lire une vidéo”, “se connecter à un autre ordinateur” plutôt que de “mettre dans le cloud”… (Propositions faites par le collectif Bam Cahier d'idées pour un navigateur écologique)

plus d'info

Compresser les images

Après avoir redimensionné et optimisé vos images, compressez-les avant la mise en ligne. La compression consiste à simplifier le code de la photo de façon imperceptible pour l'œil humain. Par exemple, cela peut être en réduisant le nombre de couleurs de l'image : si deux tons de noir ont un code couleur extrêmement proche, l'outil peut les harmoniser en leur attribuant la même couleur. L'œil humain ne percevra pas la différence. En revanche, cela diminuera le nombre d'informations dans la photo et donc son poids.

Certains outils permettent différents types de compressions en fonction de l’usage qui sera fait de votre image. Vous pouvez, par exemple, choisir entre une compression “lossy” qui permettra un gain maximal de poids avec une légère perte de qualité ou une compression “lossless” où le gain de poids sera moindre, mais la qualité intacte (plus d'explications sur Shortpixel, en anglais). Par exemple, si votre image contient du texte ou des détails importants, vous pourrez choisir une compression “lossless”. En revanche, s’il s’agit d’une photo, la compression “lossy” peut être tout à fait suffisante.

Pour compresser vos images, vous pouvez utiliser des outils tels que : Shortpixel, ImageCompressor, ou TinyPNG.

Pour un effet visuel tramé et old school, souvent marque de fabrique des sites écoconçus, il y existe aussi le site : Dither it!. Attention cependant à choisir correctement les options et les images sur lesquelles vous l’appliquez, car la perte de poids n’est pas systématique. Ce type de rendu peut également gêner la compréhension et l'interprétation des images pour certains publics avec un handicap visuel.

Si vous utilisez un CMS comme Wordpress, vous pouvez aussi utiliser des plugins tels que shortpixel.com ou imagify.io.

Exemple d’optimisation

Voici un exemple d’une photo dont le poids original est de 1,4 Mo et la taille de 2800 × 3823 pixels. Cette image pourrait être grandement optimisée pour un usage web en taille moyenne. Après redimensionnement, ajustement de la qualité, et compression, la photo peut être 14 fois plus légère tout en conservant une qualité tout à fait suffisante.

Par défaut

Poids : 1,4 Mo
Taille : 2800 × 3823 pixels

Après redimensionnement

Poids : 123 Ko
Taille : 640 × 874 pixels

Après redimensionnement et qualité à 70%

Poids : 90 Ko
Taille : 640 × 874 pixels

Après redimensionnement, qualité, et compression

Poids : 72 Ko
Taille : 640 × 874 pixels

plus d'info

Wholegrain's Search For the Best Image Optimiser Plugin

Servir les images selon la taille d’écran

Le concept de “Responsive images” permet de fournir une sélection de formats et de tailles d'images au navigateur afin que celui-ci puisse choisir lui-même laquelle charger en fonction du terminal utilisé ou de la vitesse de connexion.

Ainsi, il est recommandé après avoir correctement compressé son image, de la fournir en plusieurs résolutions au développeur pour les stocker sur le serveur du site : à minima une pour Desktop et une pour Mobile.

Cela comporte plusieurs avantages environnementaux :

Économie de transfert de données : Eviter de charger sur un mobile de 375 px de largeur, une image de 1600px qui est inutilement lourde
Économie d'électricité consommée au niveau du serveur : Éviter également au navigateur d'avoir à redimensionner dynamiquement l'image pour le terminal d'affichage, ce qui nécessite de la puissance de calcul du serveur.

Pour cela, il existe deux attributs HTML disponibles pour les images :

<srcset> : Listant les images disponibles et leurs tailles, en les séparant par une virgule
<sizes> : Permettant de décrire l'espace que l'image occupe en fonction de la résolution

Si on couple cela avec les balises <picture> et <source> permettant de fournir des formats plus performant comme le webp, le navigateur sera non seulement en mesure de choisir la dimension la plus pertinente, mais aussi le format le plus optimisé.

Exemple

<picture>
    <source media="(min-width: 599px)" srcset="large.jpg">
    <source media="(max-width: 598px)" srcset="small.jpg">
    <img src="fallback.png" alt="My description">
</picture>

Côté support, pas de panique, les navigateurs qui ne sont pas compatibles s'appuieront sur le traditionnel attribut src.

plus d'info

Images adaptatives - Mozilla Developer Network
Présentation de Nicolas Hoizey sur les images responsive : La petite clinique des images responsives
Ecoconception / Les 115 bonnes pratiques - 4ème édition

Différer le chargement des images

Cette technique, plus communément appelée lazy-loading, a pour objectif de ne pas charger les images qui ne sont pas encore visibles à l'écran. Par exemple, cela peut concerner des images se situant plus bas sur la page. La conséquence directe de cela est un gain en quantité de données consommées puisque les utilisateurs qui ne scrollent pas, ne téléchargent pas les images concernées.

Historiquement, cette pratique nécessitait du Javascript qui s'occupait de vérifier les images à charger à chaque défilement de page. Cela pouvait être coûteux techniquement. Depuis quelques temps, l'attribut HTML loading a fait son apparition. Lorsqu'il a comme valeur lazy, il permet au navigateur de faire ce travail nativement tout en étant compatible avec les "Responsive images".

Exemple

<img src="regular.jpg"
    alt=""
    width="960"
    height="540"
    loading="lazy" >

Le support est déjà bon (source : Can I use) et les navigateurs incompatibles ignorent simplement cela.

Penser aux photos de groupes plutôt qu’individuelles

Pour éviter de multiplier les photos, les photos de groupe peuvent être intéressantes à privilégier. Par exemple, pour représenter une équipe, on peut choisir une photo de groupe plutôt qu'une photo par membre de l’équipe.

D’autre part, la tentation est grande d’utiliser les photos gratuites et libres de droits des banques d’images. Or ces photos sont souvent dénuées de sens, peu représentatives de la réalité et de la diversité de la population.

Comme le dit Gerry McGovern dans son livre World Wide Waste, quitte à utiliser des photos, mieux vaut utiliser des photos de personnes réelles :

If you need to use images, optimize them and consider using real ones of real people doing real things.

Gerry McGovern, World Wide Waste

Explorer d’autres alternatives

D’autres alternatives existent et peuvent être explorées, comme par exemple, l’affichage des images à la demande, au clic, ou encore en basse résolution.

Option d'affichage des images : Le site du Low-tech lab propose une option pour afficher les images (Les actualités sur les Low-tech ou basses technologies.)
Affichage de l’image au clic comme suggéré dans Green by Default
Images avec une résolution basse ou un traitement visuel spécial : On peut aussi jouer sur le traitement visuel des photos et des images comme suggéré dans l’article Faire un site low tech.

S’assurer de l’accessibilité des images

Le texte inclus directement dans les images n’est pas accessible : il ne peut pas être lu par les lecteurs d’écran. Il est donc important de ne pas inclure de texte important dans l’image mais dans la description alt-text.

La description alt-text est une description de l'image inscrite dans le code du site. Elle est lue par le lecteur d'écran utilisé entre autres par les personnes malvoyantes, celles ayant des troubles de la concentration ou des difficultés de lecture. Elle est aussi affichée lorsque la connexion est lente et ne permet pas de charger les images. La description alt-text est une obligation du RGAA.

Pour écrire une bonne description vous pouvez suivre les conseils indiqués dans ce guide How to write an image description. La description doit contenir l’objet, l’action, et le contexte de la photo, par exemple “Pancarte Black Lives Matter dans une foule.”