Les balises d’image

La balise <img> permet d’insérer une image au sein de la page.

L’attribut alt est extrêmement important, à la fois pour le SEO et l’accessibilité. Il permet pour les lecteurs d’écran d’énoncer une description de l’image, et pour les moteurs de recherche de référencer l’image sur les bons mots-clés.

La seule exception concerne les images décoratives qui n’ont volontairement pas besoin d’attribut alt, car elles n’apportent pas de sémantique particulière. Vous pouvez retrouver l’arbre de décision recommandé par le W3C ici ↗.

L’attribut decoding permet de spécifier au navigateur de quelle manière décoder l’image :

• sync pour réaliser le décodage dans le même flow que le contenu
• async pour ne pas bloquer le rendu du contenu le temps du décodage
• auto pour le laisser le navigateur faire le meilleur choix selon lui en fonction de la situation

Lorsque le navigateur charge une image, il n’a aucun moyen de connaître sa taille réelle avant la fin du chargement. Pour réduire le CLS (Cumulative Layout Shift) ↗, il est alors nécessaire de spécifier explicitement la largeur et la hauteur de l’image source.

L’attribut loading permet de spécifier au navigateur s’il doit charger l’image même si elle n’est actuellement pas présente dans le viewport. Cela permet ainsi d’optimiser le chargement de la page en évitant de demander des ressources inutiles dès le début.

• eager : comportement par défaut, charge l’image sans condition
• lazy : charge l’image à partir du moment où elle va rentrer dans le viewport

L’attribut srcset permet de charger différentes images en fonction de deux critères :

• largeur du viewport : un nombre entier suivi de la lettre w
• densité de pixels : un nombre flottant suivi de la lettre x

Cet attribut permet de résoudre des problèmes dits de “Resolution Switching”, c’est-à-dire lorsque l’on souhaite charger des versions différentes d’une même image en fonction soit de la largeur du viewport (ex: mobile vs desktop), soit de la densité de pixels de l’écran (ex: Retina ou non).

Pour utiliser cet attribut, il faut utiliser la syntaxe :

• [[image_url]] : le chemin de l’image que le navigateur chargera si cette version est choisie
• [[image_width] : la taille intrinsèque de l’image (aka celle que l’on voit dans l’explorateur de fichiers)
• Chaque nouvelle taille d’image doit être séparée par une virgule

Le navigateur va automatiquement faire le meilleur choix d’image en fonction du calcul suivant : image_width / viewport_width. L’image qui possède le ratio le plus proche de la densité de pixels de l’écran sera choisie automatiquement par le navigateur.

Si on prend l’exemple suivant :

Sur un viewport de 320px avec un densité de 1, l’image de 500px de large sera prise. Par contre, avec un viewport de 320px et une densité de 2 (un iPhone par exemple), le navigateur va choisir le ratio le proche de la densité de pixels, mais toujours le plus proche au dessus. Donc dans ce cas, il choisira l’image de 1000px.

L’attribut sizes permet de définir explicitement à quelle taille du viewport le navigateur doit choisir quelle image définie dans l’attribut srcset. Cette méthode peut paraître intéressante, mais elle présente néanmoins un inconvénient majeur : aucun écran utilisateur n’est pareil. Si on veut gérer l’ensemble des cas possibles, c’est tout bonnement utopique. Il vaut mieux laisser le navigateur faire le meilleur choix en calculant le ratio vu au-dessus.

Vous pouvez utiliser une variété de formats d’image ↗ à intégrer au sein d’une page, cependant certains sont plus optimiés et performants que d’autres. La recommandation générique est d’utiliser le format webp, plus performant et léger, et supporté dans tous les navigateurs modernes.

La balise <picture> permet de renseigner différentes images via des balises <source> enfants, chacune pouvant être comparée à un attribut srcset.

Elle permet de résoudre des problèmes de “Art Direction”, c’est-à-dire afficher des images différentes en fonction du viewport ou la densité de pixels.

On l’utilise généralement lorsque qu’une image doit être recadrée pour garder l’élément principal de l’image visible quel que soit le support.

• Contenu embarqué←
• Vidéos→