Mettre une image en ligne

En tant que développeur front, j'ai eu besoin d'ajouter une image sur le site. On m'a dit : "C'est facile, l'image est sur Figma, tu peux la récupérer là-bas". Donc je vais sur Figma, je trouve mon image. Et là ! Figma me demande de choisir un format pour l'export :

PNG, JPG ou SVG ? Comment choisir ?

Cet article va vous guider pour mettre une image en ligne et je vais vous partager quelques conseils que j'aurai aimé lire quand j'ai commencé ce ticket.

Par ailleurs, les images constituent souvent la majeure partie de la bande passante nécessaire pour afficher une page web. On va voir comment faire pour accélérer le chargement d’une image, tout en limitant les coûts en bande passante.

La base : la balise <img>

Vous connaissez sûrement déjà la balise <img>. Elle permet d'afficher une image dans un page web à partir de son URL : <img src="https://takima.fr/my-image.png"/>

Ce que vous ne savez peut-être pas, c'est que, par défaut, toutes les images d’une page web sont téléchargées dès le chargement de la page, même si elles ne sont pas encore visibles. 

Quel gâchis !

Pour résoudre ce problème, la balise <img> possède un attribut loading qui peut être défini sur lazy. Cet attribut indique au navigateur d’attendre que l'utilisateur soit "proche" de l'image pour la télécharger. À ne pas mettre sur les images qui apparaissent dès l'affichage de la page.

Choisir le bon format d'image

PNG, JPG, SVG, WebP, AVIF ? Késako ?

Pour choisir, 2 critères vont nous intéresser :

1. le niveau de compression proposé par le format (un meilleur taux de compression implique une image plus petite donc un chargement plus rapide et une diminution du coût de la bande passante)
2. la prise en charge du format par les différents navigateurs

Si on trie les formats d'image par taux de compression du meilleur au moins bon, on a : AVIF > WebP > JPG > PNG

AVIF est parmi les meilleurs formats disponibles pour le web. Il est pris en charge par de nombreux navigateurs (94% des utilisateurs selon l'organisation caniuse).

Pour (beaucoup) plus de détails sur les formats d’images pris en charge par les navigateurs, leurs avantages et leurs fonctionnalités, vous pouvez lire cet article : https://developer.mozilla.org/fr/docs/Web/Media/Guides/Formats/Image_types

En réalité, il n'y a pas besoin de choisir un seul format : on peut indiquer au navigateur plusieurs formats d'image, grâce à la balise <picture>.

La balise <picture>

La balise <picture> permet de fournir plusieurs images et de laisser le navigateur choisir l'image la plus adaptée en fonction des formats supportés, de la taille de l'écran, etc... Elle s'utilise comme suit :

<picture>
  <source srcset="picture-of-my-cat.avif" type="image/avif" />
  <img src="picture-of-my-cat.png" alt="texte alternatif" />
</picture>

Dans les grandes lignes, une <picture> contient des <source> ainsi qu’une <img> qui sert en dernier recours. Les <source> contiennent un attribute srcset avec l'URL de l'image et un attribute type avec le type de l'image. Un autre exemple pour aller plus loin :

<picture>
  <source srcset="big-cat.avif 1200w, small-cat.avif 600w" type="image/avif" media="(width >= 1000px)"/>
  <source srcset="4k-cat.webp 3x, hd-cat.webp 1x" type="image/webp" />
  <img src="picture-of-my-cat.png" alt="texte alternatif" />
</picture>

Pour plus de détails, consultez la doc de la balise <picture> et/ou de la balise <source>.

Le cas des SVG

Les plus attentifs d'entre vous ont remarqué que je n'ai pas parlé des SVG. C'est parce qu'ils sont un peu différents :

Les SVG (Scalable Vector Graphics) sont des fichiers vectoriels : ils ne fonctionnent pas avec des pixels comme les autres formats mais utilisent des formes géométriques comme des lignes ou des arcs de cercle. Cela leur permet d'avoir des fichiers très légers et d'être affichés à n'importe quelle taille sans perte de qualité. Ils sont souvent utilisés pour créer des icônes.

⚠️ Attention : un fichier SVG est capable de contenir des images non vectorielles. Dans ce cas là, il ne conserve pas les avantages de poids et de qualité des SVG. Par exemple, quand on exporte un élément en SVG dans Figma, si celui-ci n’a pas été conçu de façon vectorielle, c’est en réalité une image PNG représentée en base64 qui est incluse dans le SVG !

Préparer une image pour la publication

Après ce qu’on vient de dire, vous aurez sûrement envie de modifier votre image pour l’adapter au web.

Comment savoir quelle taille d’image choisir ?

Le plus simple pour bien choisir la taille de l’image, c’est de mettre l'image non transformée dans le site web (faire le développement sans optimisation) et de vérifier sa largeur et sa hauteur grâce aux outils de développement.

Si on redimensionne l'image aux dimensions obtenues, la qualité sera probablement insuffisante. Je préconise de multiplier par 2 les dimensions obtenues pour obtenir une image de bonne qualité sans trop augmenter les besoins en bande passante.

Exemple: L'image de présentation de cet article a une résolution de 2.7 (l'image fait 2000 pixels de large pour un conteneur de 740 pixels).

L'image qui suit a une résolution de 1 :

La différence est la plus flagrante au niveau des textes écrits en petit.

Convertir une image

Squoosh permet de convertir des images "en ligne" sans que celles-ci ne quittent votre ordinateur. Sinon, installer une application comme Converseen.

Dans le cas des SVG, l'outil SVGOMG permet de réduire la taille des SVG en limitant les impacts sur la qualité.

Choix de la qualité

Lors de la conversion d'une image, on peut choisir la qualité de l'image de sortie. Une qualité optimale de conversion est entre 40% et 70%.

En dessous de 40% la profondeur des couleurs devient un peu faible et on voit apparaître des halos de couleurs sur les zones de couleur unies. Il vaut mieux réduire le nombre de pixels si on veut diminuer la taille de l’image.

Au-delà de 70%, si la qualité perçue n'est pas suffisante, il sera préférable d'augmenter le nombre de pixels de l'image et baisser la qualité pour rester dans l’intervalle avec le meilleur rapport qualité/poids du fichier.

Si l'image source a une certaine dimension, l'augmenter au-delà ne permettra pas d'améliorer la qualité. Pour préserver la qualité d'une image convertie, partir de l'image source (celle de plus grande qualité, taille et poids, quel que soit son format) et convertir en une seule étape vers le format, la taille et la qualité désirés. Les conversions multiples peuvent aboutir à des pertes de qualité.

Conclusion

Avant de mettre une image en ligne, il est préférable de la convertir pour qu'elle charge plus rapidement et réduire les coûts en bande passante. On peut agir sur une dimension, le format ou encore le niveau de qualité de l'image. Le format d'image à privilégier est AVIF.

Merci d'avoir lu cet article. J'espère qu'il vous a été utile ou, à défaut, que vous le garderez de côté pour le jour où vous aurez besoin de mettre une image en ligne.