# Assets / Images

:::info
++État de la fiche++ : en cours de construction
:::

:::info
Texte d'introduction [à rédiger]
:::

## 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](https://httparchive.org/reports/page-weight?start=2020_01_01&end=latest&view=list#reqImg))

### 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](https://hackmd.io/@NicolasDievart/S1diSa4av#Polyfill-et-Transpiler).

<!-- 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
- [ ] Affichage à la demande
- [ ] Affichage au chargement de la page

:::warning
++Zone de texte en fonction de l'option choisie :++
* raisons pour ce choix (usages et autres) et les paramètres pour réduire le poids
* rappeler sur quoi ca influera : difficultés d'affichage en cas de mauvaise couverture
:::

**Traitement**
- [ ] Aucun
- [ ] Tramage
- [ ] Compression non destructive
- [ ] Compression destructive

:::warning
++Zone de texte en fonction de l'option choisie :++
* raisons pour ce choix (usages et autres) et les paramètres pour réduire le poids
* rappeler sur quoi ca influera : difficultés d'affichage en cas de mauvaise couverture
:::

**Type**
- [ ] Vectoriel
- [ ] Matriciel

:::warning
++Zone de texte en fonction de l'option choisie :++
* raisons pour ce choix (usages et autres) et les paramètres pour réduire le poids
* rappeler sur quoi ca influera : difficultés d'affichage en cas de mauvaise couverture
:::

## Les bonnes questions à se poser

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

:::warning
++Zone de texte en fonction de l'option choisie :++
* raisons pour ce choix (usages et autres) et les paramètres pour réduire le poids
* rappeler sur quoi ca influera : difficultés d'affichage en cas de mauvaise couverture
:::

### Type d'image
Quel type d'image est plus adaptée au contenu de mon image ?
- [ ] Vectoriel
- [ ] Matriciel

:::warning
++Zone de texte en fonction de l'option choisie :++
* raisons pour ce choix (usages et autres) et les paramètres pour réduire le poids
* rappeler sur quoi ca influera : difficultés d'affichage en cas de mauvaise couverture
:::

### Poids
Comment réduire au maximum le poids de mon image ?
- [ ] Résolutions et dimensions
- [ ] Traitement graphique
- [ ] Format
- [ ] Compression

:::warning
++Zone de texte en fonction de l'option choisie :++
* raisons pour ce choix (usages et autres) et les paramètres pour réduire le poids
* rappeler sur quoi ca influera : difficultés d'affichage en cas de mauvaise couverture
:::

## Les cas pour bien comprendre en contexte

### Cas n°1 : Low-tech Lab

:::info
++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.).


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.


### Cas n°2 : Organic Basics

:::info
++Question posée 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é.

<br/>

(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
* [Essential Image optimization](https://images.guide/)
* [Guide de compression via Gimp](https://hackmd.io/@timotheegoguely/guide-compression-images-low-tech)
* [CSS Media resolution](https://caniuse.com/css-media-resolution)
* [A Guide to the Responsive Images Syntax in HTML – CSS Tricks](https://css-tricks.com/a-guide-to-the-responsive-images-syntax-in-html/)
* [State of Images Report – HTTP Archive ](https://httparchive.org/reports/state-of-images)
* [Maximally optimizing image loading for the web in 2021](https://www.industrialempathy.com/posts/image-optimizations/)

### Outils
* **[Squoosh](https://squoosh.app/)**
* **[ImageOptim](https://imageoptim.com/)**
* [Short Pixel](https://shortpixel.com/)
* [TinyPNG](https://tinypng.com/)
* [Dither it!](https://ditherit.com/)
* [DOODAD](https://doodad.dev/)
* [SVGOMG](https://jakearchibald.github.io/svgomg/)

## Lexique

- image matricielle
- image vectorielle
- résolution
- dithering