Écoconception

Page de description des principes d’écoconception recommandés à suivre dans l’usage des composants du Design System de France Travail.

Définition

Un service numérique se définit comme l’association de matériels (ordinateurs, téléphones, etc.), logiciels et d’une infrastructure (réseaux et datacenters) permettant de répondre à un besoin spécifique (ex : rechercher l’horaire d’un train).

Les principes de l’écoconception

• Simplicité : Minimiser le nombre d’éléments et de fonctionnalités
• Frugalité : Optimiser les éléments et les fonctionnalités
• Pertinence : Permettre à l’utilisateur de parvenir rapidement à un résultat utile et exploitable
• Durabilité : Favoriser la résilience et l’évolutivité du service numérique

Se poser en permanence la question : en a-t-on besoin ? Exemple, pour une zone que l’on souhaite rendre “plus visible”, ai-je besoin de mettre une image ? Un zone colorée avec un symbole serait-il suffisant ? On adresse ainsi la “simplicité” et la “frugalité”, mais également la “pertinence”. Comme les modes et les coutumes évoluent l’image peut aussi être questionnée quant à la “durabilité”, une couleur, un symbole l’est moins…

L’écoconception, en résumé

L’écoconception doit être prise en compte tout le long du cycle de vie d’un service numérique. Pour s’en assurer, il est nécessaire de l’intégrer dans les pratiques de l’équipe et dans les objectifs du produit. Ainsi, la mise en place d’un cadre favorable à l’écoconception dès le début du cycle de vie du produit est essentielle (formation des équipes, définition d’indicateurs et d’objectifs, mise en place d’une comitologie, etc.). Ensuite, il faudra s’assurer de bien connaître les utilisateurs et leurs besoins, afin de ne concevoir que les fonctionnalités essentielles. Le nombre d’actions à réaliser pour un parcours utilisateur donné devra être minimisé. L’interface devra être simple et épurée, et ses contenus, optimisés. Le code, quant à lui, devra être simple et concis. Enfin, l’architecture globale du service numérique devra être sobre et efficiente. Un pilotage fin des indicateurs devra être réalisé tout au long du cycle de vie du service numérique.

Quelques pistes et QuickWin”

Sur un site web, le poids des images représente plus de 40% du poids total, donc optimiser les images apporte rapidement et facilement un gain intéressant. Trois actions sont principalement à mettre en oeuvre :

• le poids de l’image
• les formats de fichiers de l’image
• les tailles d’image (hauteur/largeur)

Recommandations

• Éviter de mettre des images dans les CSS, car difficile à optimiser
• Mettre en oeuvre un serveur statique pour stocker les assets de type images

Le poids des images

L’ensemble des formats d’images proposent intrinsèquement des algorithmes de compression. Certains sont “Lossless” : compression sans dégradation et réversible, d’autres “Lossy” : compression avec dégradation et non réversible.

La compression par l’exemple

Pour illustrer voici un exemple d’une image avec 4 facteurs de compression :

On constate visuellement que les 2 dernières images ne sont pas de qualité suffisante, on s’arrêtera de préférence à 70%.

Mise en oeuvre avec un pipeline de CI

Afin de mettre en oeuvre ces différents niveaux de compression vous pouvez utiliser l’outil ImageMagick

magick -quality 70 image-origine.jpg image-destination.jpg

Cet outil en ligne de commande peut aisément être intégré dans un pipeline de CI afin d’automatiser le processus de compression.

Le format des images

Au cours de l’histoire du web, plusieurs formats d’images ont été intégrés par le W3C :

• 1985 : BMP
• 1987 : GIF
• 1991 : JPEG
• 1997 : PNG
• 2010 : WebP
• 2010 : SVG
• 2019 : AVIF

Actuellement, la plupart des sites la balise utilisent l’élément <img> :

<img src="img.jpg" loading="lazy" decoding="async" width="800" height="600" alt="texte alternatif accessible">

Afin de profiter des nouveaux formats, on utilisera en plus l’élément <picture>. L’ordre est important, si le navigateur ne “connait pas” un format, il passe au suivant :

<picture>
    <source type="image/avif" srcset="img.avif">
    <source type="image/webp" srcset="img.webp">
    <img srcset="img.jpg"
        loading="lazy" decoding="async" width="800" height="600"
        alt="texte alternatif accessible">
</picture>

Chacun des formats d’image ont intrinsèquement des algorithmes de compression qui leurs sont propre et optimisés. AVIF est meilleur que WEP, qui est lui même meilleur que JPG. Ci-dessous, un exemple de conversion d’une image jpg vers web et avif sans compression particulière :

À qualité visuelle identique, le poids de cette image est :

• Fichier jpg (original) : 45 ko
• Fichier webp : 18 ko
• Fichier avif : 11 ko

Mise en oeuvre avec un pipeline de CI

Afin de mettre en oeuvre ces différents formats vous pouvez utiliser l’outil de conversion ImageMagick qui vous permet de générer les différents assets.

magick -quality 80 kiwi.jpg kiwi.jpg
magick -quality 60 kiwi.jpg kiwi.webp
magick -quality 50 kiwi.jpg kiwi.avif

La taille des images

Bien penser à redimensionner les images qui vont être affichées à la “bonne” taille. Par exemple, trop souvent on note la présence dans une page web d’une “grande” image qui est affichée en “petit format”, cela impacte 2 éléments :

• La quantité de données transmise et donc l’augmentation de l’impact carbone
• Une charge au niveau du CPU du navigateur qui va redimensionner à la volée l’image pour l’afficher

Il est également possible de créer plusieurs tailles d’images adaptées à chaque type de terminal. À France Travail nous conseillons d’en proposer 2. Ce mécanisme s’appelle “media-query”, le navigateur va sélectionner l’image adaptée à sa largeur.

Exemple ici avec 3 tailles d’images différentes :

• une version d’image au format .avif proposée en taille 400px, 800px et 1200px
• une version d’image au format .webp proposée en taille 400px, 800px et 1200px
• une version d’image au format .jpg proposée en alternative à la taille de 1200px

Le terminal, selon sa résolution (densité de pixels) et sa définition (nombre de pixels), téléchargera l’image la plus adaptée, en format et en taille.

<picture>
  <source type="image/avif"
          srcset="kiwi.avif 400w, kiwi-hd.avif 800w, kiwi-4k.avif 1200w">
  <source type="image/webp"
          srcset="kiwi.webp 400w, kiwi-hd.webp 800w, kiwi-4k.webp 1200w">
  <img src="kiwi.jpg" alt="texte alternatif accessible" decoding="async" loading="lazy"
       width="1200" height="800">
</picture>