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 serait de 2062 Ko sur l’échantillon testé, et le poids moyen des images transférées pour une page serait de 973.4 Ko, ce qui en représente une grosse partie !

Optimiser les images et réduire leur taille

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, ce qui est bien 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 pour redimensionner l’image.

On peut également jouer sur la qualité de l’image et choisir une qualité moindre qui fera tout à fait bon effet.

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
Icone Utilisez des glyphs quand c’est possible, ou icônes et styles CSS

Préférer les images vectorielles et glyphes

Les images vectorielles et glyphes pèsent moins lourd que les photos. Par exemple, lorsque les images sont purement décoratives et n'apportent rien en termes d'information, il convient de privilégier le vectoriel ou d’explorer d'autres approches esthétiques.

Par exemple, ce site utilise des illustrations représentant des cartons plutôt que des photos : Carton plein - Boutique de cartons de déménagements

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, compresser-les. Vous pouvez utiliser des outils tels que Shortpixel, ImageCompressor, TinyPNG avant la mise en ligne.

Pour un effet visuel tramé et old school, souvent marque de fabrique des sites éco-conç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 par 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 donc être grandement optimisée par son poids et sa taille. Après redimensionnement, ajustement de la qualité, et compression, la photo peut être 14 fois plus légère 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
Photo d’un plat gourmet coloré.
plus d'info

Servir les images selon la taille d’écran

Le concept de “Responsive images” permet, surtout lorsque les images ne sont pas vectorielles, de charger une taille d’image selon la taille de l’écran de l’utilisateur. Cela nécessite de la puissance de calcul pour le serveur qui doit redimensionner dynamiquement l’image selon le terminal d’affichage.

Pour éviter cette sollicitation inutile, il est recommandé de correctement compresser ses images et d’en fournir plusieurs, par exemple pour ordinateur, tablette et smartphone, à différentes résolutions.

Cela se fait avec la balise html <picture> qui est largement supportée par les navigateurs mais la bonne nouvelle c’est que cela fonctionne même sans le support grâce à une “fallback” avec la balise <img />.

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>
                    
plus d'info

Penser aux photos de groupes plutôt qu’individuelles

Pour éviter de multiplier les photos, pour représenter une équipe par exemple, les photos de groupe peuvent être intéressantes à privilégier, 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 ne représentent pas 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 vraies personnes : If you need to use images, optimize them and consider using real ones of real people doing real things.

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.

S’assurer de l’accessibilité des images

Le texte qui est inclus directement dans les images n’est pas accessible et 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 plutôt dans la description alt-text.

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.”

Sauf mention contraire, les contenus de ce site sont mis à disposition selon les termes de la licence Creative Commons Attribution 4.0 International.

Venez échanger avec nous sur http://slack.designersethiques.org, canal #projet_ecoconception.

Autrices du guide : Aurélie Baton et Anne Faubry.