Compresser et appeler des images

Les images constituent une grande partie des données transférés à l'ouverture d'une page web aujourd'hui. Comment savoir si l'usage d'images est nécessaire et, le cas échéant, comment faire pour les images soient les plus informatives et les plus légères possibles ?

Bonnes pratiques

Limiter le nombre de requêtes

Limiter le nombre d'images requêtées au minimum permet de réduire fortement le temps de chargement d'un site. En 2020, le nombre de requêtes d’images moyen par page était d’environ 25, contre plus de 40 en 2016 ! (Source)

Redimensionnement

Dimensionner correctement les images chargées en amont (en dehors du CMS) en fonction de leur contexte d’affichage réel (hauteur, largeur, résolution). Il est possible de proposer plusieurs versions d'une même image (de dimensions différentes) en fonction de la résolution de l'écran du terminal et de la largeur de la fenêtre du navigateur à l'aide de différentes techniques HTML5 telles que l'attribut srcset et la balise <picture> : le navigateur chargera alors uniquement la version la plus adaptée en fonction des règles définies.

Compression & optimisation

En fonction du format de votre image (PNG, JPG, SVG, etc.), différents outils et algorithmes de compressions et d'optimisation existent. Pour les images matricielles (non vectorielles), plus la compression sera importante, plus votre image sera légère, mais passé un certain seuil, la qualité visuelle de votre image sera dégradée. Il s'agira donc de trouver un juste équilibre entre forte compression (faible poids) et qualité visuelle convenable.

Lazy loading

Utiliser le chargement paresseux des images à l'aide de l'attribut loading. La valeur lazy permet de charger une image de façon asynchrone seulement lorsqu'elle apparait dans la fenêtre du navigateur (ou juste avant). Cela permet ainsi de réduire le temps de chargement initial d'une page web car elle ne chargera que les images visibles à l'écran.

<img src="image.jpg" alt="..." width="200" height="200" loading="lazy" />

Pour les navigateurs plus anciens qui ne supportent pas l'attribut loading, il sera simplement ignoré et vos images se chargeront avec le reste du site web lors de la première visite de la page. Cependant, les quelques lignes de JavaScript suivantes vous permettent de proposer une solution de secours uniquement en cas de non support par le navigateur en chargeant dynamiquement un polyfill.

<!-- Let's load this in-viewport image normally -->
<img src="hero.jpg" alt="…">

<!-- Let's lazyload the rest of these images -->
<img data-src="unicorn.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="cats.jpg" alt="…" loading="lazy" class="lazyload">
<img data-src="dogs.jpg" alt="…" loading="lazy" class="lazyload">

<script>
  if ('loading' in HTMLImageElement.prototype) {
    // supported in browser
    const images = document.querySelectorAll('img[loading="lazy"]');
    images.forEach(img => {
      img.src = img.dataset.src;
    });
  } else {
    // dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.1.2/lazysizes.min.js';
    document.body.appendChild(script);
  }
</script>

Choix de conception

Choix d'affichage

  • [ ] Pas d'image
    • Une image n'est pas nécessaire à la compréhension rapide des informations clés de la page
  • [ ] Affichage à la demande
    • Les conditions d'accès à mon service ne sont pas claires et je préfère privilégier la rapidité d'accès tout en laissant l'utilisateur décider de son expérience
  • [ ] Affichage au chargement de la page
    • J'ai des contraintes réelles d'image de marque et un besoin d'afficher graphiquement des informations clés

Traitement

  • [ ] Aucun
    • À éviter dans tous les cas
  • [ ] Tramage
    • Cela répond à une charte graphique existante
  • [ ] Compression non destructive
    • Je n'ai pas d'instruction claire sur le traitement graphique des images et je suis optimisé leur chargement
  • [ ] Compression destructive
    • J'ai besoin d'une image chargée le plus vite possible, quitte à réduire sa lisibilité ( inapproprié pour des images avec du contenu textuel )

Type

  • [ ] Vectoriel
    • J'ai des schémas, des diagrammes, des pictogrammes ou des tableaux à afficher
  • [ ] Matriciel
    • J'ai une photo à afficher

Les bonnes questions à se poser

Le contenu de mon image est-il transposable sous une forme plus adaptée, comme un tableau ou du texte par exemple ?

  • [ ] Oui
  • [ ] Non

Quel type d'image est plus adaptée au contenu de mon image ?

  • [ ] Vectoriel
  • [ ] Matriciel

Comment réduire au maximum le poids de mon image ?

  • [ ] Résolutions et dimensions
  • [ ] Traitement graphique
  • [ ] Format
  • [ ] Compression

Les cas pour bien comprendre en contexte

Cas n°1 : Gov.UK

Questions posées par le cas : est-ce que j'ai besoin d'une image ?

Le système de design numérique du gouvernement britannique porté par le GDS (Government Digital Services) est considéré comme une grand réussite en termes d'expérience utilisateur. Un choix radical a été fait en termes d'interface et navigation afin de prioriser l'accessibilité des parcours et des contenus, on retrouve notamment peu d'images sur les sites officiels.

La règle est claire : Avoid unnecessary decoration. Only use images if there’s a real user need. (Source)

Cas n°2 : Low-tech Lab

Questions posées par le cas : est-ce que les images d’une page doivent être chargées par défaut ? Est-ce qu’on peut laisser le choix à l’usager du chargement de ces éléments qui représentent en moyenne 70 à 80% du poids d’une page web ?

En fait, charger par défaut une image dans une page revient à faire trois hypothèses : l’usager dispose d’une connexion au débit suffisant, l’usager ne paye pas la consommation de données ou à bas prix, une abondance matérielle et énergétique est présente tout le long de la chaîne (électricité, matériel, etc.).


Page blog du Low-tech Lab

Le Low-tech Lab a choisi une approche différenciée pour les images présentes sur son site. Certaines sont traitées pour avoir le poids le plus faible possible et pour incarner l’esthétisme du site. D’autres ne se chargent qu’à la demande. Si un visiteur arrive sur la page “Actualités”, les images de chacun des articles ne sont pas chargées par défaut. Si le visiteur souhaite afficher les images alors il lui suffit de cliquer sur le bouton “Afficher les images” présent à deux endroits dans la page. Ainsi le visiteur décide d’afficher les images selon ses propres conditions de connexion.

Un deuxième niveau de raffinement a été apporté à cette page. Les articles les plus vieux sont généralement peu consultés ou alors sont recherchés précisément par des personnes les ayant déjà lus. Ainsi, les articles de plus de 4 mois n’affichent plus les images miniatures afin de réduire encore le poids général de la page et afin de ne pas retenir l’attention sur un contenu déjà ancien (à l’échelle de publication du Low-tech lab). Écoconception et respect de l’attention de l’usager vont souvent de pair.

Détail de la miniature du blog

Cas n°3 : Organic Basics

Questions posées par le cas : Est-ce que les images d’une page peuvent évoluer en fonction de critères physiques, comme l’intensité en carbone de l’électricité qui alimente les serveurs d’hébergement ?

Branch Magazine a choisi d’adapter l’interface de son site web, notamment ses images, en fonction de la "propreté" de l’électricité qui alimente leurs serveurs. Moins l’électricité contient de carbone est plus la qualité d’image s’améliore. Si l'électricité fournie contient trop de carbone alors l’image ne s’affiche plus et est remplacée par le texte de la balise alt de l’image. Cette pratique implique de bien respecter les normes d’accessibilité RGAA/a11y, là encore une pratique d’éco-conception numérique se lie aux pratiques d’accessibilité.


Page d'explication du design du site de Branch Magazine (Crédits : Tom Jarrett, Branch Magazine)

Un avertissement toutefois, ce n’est pas parce que l’électricité est moins carbonée qu’il faut en consommer plus, comme en chargeant des photos plus lourdes par exemple. Un des piliers de base de l’éco-conception numérique est de réduire l’empreinte environnementale de façon général, en créant cette interaction entre son interface et le réseau électrique le site de Branch va à l’encontre de ce pilier.

Ressources

Guides

Outils

results matching ""

    No results matching ""