7.1 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 ?

Choisir le bon format

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 API tools ou imagify.io.

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.

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 (en anglais), quitte à utiliser des photos, mieux vaut utiliser des photos de personnes réelles :

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 (en anglais)
• 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(en anglais). La description doit contenir l’objet, l’action, et le contexte de la photo, par exemple “Pancarte Black Lives Matter dans une foule.”