Images

Les images décoratives, telles que les dégradés d'arrière-plan sur les boutons ou les images d'arrière-plan sur les sections de contenu ou la page entière, sont des éléments de présentation et doivent être appliquées avec CSS. Lorsqu'une image ajoute du contexte à un document, il s'agit d'un contenu qui doit être intégré avec HTML.

La méthode principale pour inclure des images est la balise <img> avec l'attribut src faisant référence à une ressource d'image et l'attribut alt décrivant l'image.

<img src="images/eve.png" alt="Eve">

L'attribut srcset sur <img> et l'élément <picture> permettent d'inclure plusieurs sources d'images avec des requêtes média associées, chacune avec une source d'image de remplacement. Cela permet de diffuser le fichier image le plus approprié en fonction de la résolution de l'appareil, des capacités du navigateur et de la taille de la fenêtre d'affichage. L'attribut srcset permet de fournir plusieurs versions d'image en fonction de la résolution et, avec l'attribut sizes, de la taille de la fenêtre d'affichage du navigateur.

<img src="images/eve.png" alt="Eve"
  srcset="images/eve.png 400w, images/eve-xl.jpg 800w"
  sizes="(max-width: 800px) 400px, 800px" />

Vous pouvez également utiliser l'élément <picture> avec les enfants <source>, qui prennent <img> comme source par défaut.

<picture>
  <source src="images/eve.png" media="(max-width: 800px)" />
  <source src="images/eve-xl.jpg" />
  <img src="images/eve.png" alt="Eve" />
</picture>

En plus de ces méthodes d'images responsives HTML intégrées, HTML permet également d'améliorer les performances de rendu des images grâce à divers attributs. La balise <img>, et donc les boutons d'envoi graphiques <input type="image">, peuvent inclure les attributs height et width pour définir le format de l'image et réduire ainsi le décalage de la mise en page du contenu. L'attribut lazy permet le chargement différé.

Le HTML permet également d'inclure des images SVG directement à l'aide de <svg>, bien que les images SVG avec l'extension .svg (ou en tant que data-uri) puissent être intégrées à l'aide de l'élément <img>.

Chaque image de premier plan doit au minimum inclure les attributs src et alt.

Le fichier src correspond au chemin d'accès et au nom de fichier de l'image intégrée. L'attribut src permet de fournir l'URL de l'image. Le navigateur récupère ensuite le composant et l'affiche sur la page. Cet attribut est obligatoire pour <img>. Sans cela, rien ne peut être affiché.

L'attribut alt fournit un texte alternatif pour l'image, en fournissant une description de l'image pour ceux qui ne peuvent pas voir l'écran (pensez aux moteurs de recherche et aux technologies d'assistance, et même à Alexa, Siri et l'Assistant Google), et peut être affiché par le navigateur si l'image ne se charge pas. En plus des utilisateurs disposant d'un réseau lent ou d'une bande passante limitée, le texte alt est extrêmement utile dans les e-mails HTML, car de nombreux utilisateurs bloquent les images dans leurs applications de messagerie.

<img src="path/filename" alt="descriptive text" />

Si l'image est au format SVG, incluez également role="img", ce qui est nécessaire en raison des bugs de VoiceOver.

<img src="switch.svg" alt="light switch" role="img" />

Rédiger des descriptions d'images alt efficaces

Les attributs alt doivent être courts et concis. Ils doivent fournir toutes les informations pertinentes transmises par l'image, tout en omettant les informations redondantes par rapport à d'autres contenus du document ou qui ne sont pas utiles. Le ton du texte doit refléter celui du site.

Pour rédiger un texte alternatif efficace, imaginez que vous lisez l'intégralité de la page à une personne qui ne peut pas la voir. En utilisant l'élément sémantique <img>, les utilisateurs de lecteurs d'écran et les robots sont informés que l'élément est une image. Il est redondant d'inclure "Il s'agit d'une image/capture d'écran/photo de" dans alt. L'utilisateur n'a pas besoin de savoir qu'il y a une image, mais il doit connaître les informations qu'elle transmet.

Normalement, vous ne diriez pas "Ceci est une image granuleuse d'un chien portant un chapeau rouge". Vous devez plutôt relayer ce que l'image transmet par rapport au contexte du reste du document. Ce que vous transmettez change en fonction du contexte et du contenu du texte environnant.

Par exemple, la photo d'un chien est décrite de différentes manières, selon le contexte. Si Fluffy est un avatar à côté d'un avis sur la nourriture pour chiens Yuckymeat, alt="Fluffy" suffit.

Si la photo fait partie de la page d'adoption de Fluffy sur le site Web d'un refuge pour animaux, l'audience cible est le futur maître du chien. Le texte doit décrire les informations transmises dans l'image qui sont pertinentes pour un utilisateur et qui ne sont pas répétées dans le texte environnant. Une description plus longue, telle que alt="Fluffy, a tri-color terrier with very short hair, with a tennis ball in her mouth", est appropriée. Le texte d'une page d'adoption inclut généralement l'espèce, la race, l'âge et le sexe de l'animal à adopter. Il n'est donc pas nécessaire de répéter ces informations dans le texte alternatif. Mais la biographie écrite du chien n'inclut probablement pas la longueur et la couleur de ses poils, ni ses jouets préférés.

Il est important de noter que nous n'avons pas décrit l'image dans son intégralité. Le futur propriétaire du chien n'a pas besoin de savoir si le chien est à l'intérieur ou à l'extérieur, ni qu'il porte un collier rouge et une laisse bleue.

Lorsque vous utilisez des images pour l'iconographie, l'attribut alt fournit le nom accessible. Transmettez la signification de l'icône, et non une description de l'image. Par exemple, l'attribut alt de l'icône Loupe est search. L'icône en forme de maison a pour texte alternatif home. La description de l'icône de disquette de 5 pouces est save. Si deux icônes de Fluffy sont utilisées pour indiquer les bonnes pratiques et les antipatrons, le chien souriant portant un béret vert peut avoir un ensemble alt="good", tandis que le chien grognant portant un béret rouge peut lire alt="bad". Cela dit, n'utilisez que des icônes standards. Si vous utilisez des icônes non standards, comme les Fluffy bons et mauvais, incluez une légende et assurez-vous que les icônes ne sont pas le seul moyen de déchiffrer la signification des éléments de votre UI.

Si l'image est une capture d'écran ou un graphique, indiquez ce que l'on apprend de l'image au lieu de décrire son apparence. Si une image vaut mille mots, la description doit transmettre de manière concise tout ce qui a été appris.

Omettez les informations que l'utilisateur connaît déjà grâce au contexte ou qui sont fournies dans le contenu. Par exemple, si vous êtes sur une page de tutoriel expliquant comment modifier les paramètres du navigateur et que la page porte sur le fait de cliquer sur des icônes dans le navigateur Chrome, l'URL de la page dans la capture d'écran n'a pas d'importance. Limitez le alt au sujet traité : comment modifier les paramètres.

Le alt peut être "L'icône des paramètres se trouve dans la barre de navigation sous le champ de recherche." N'incluez pas "capture d'écran" ni "machinelearningworkshop", car l'utilisateur n'a pas besoin de savoir qu'il s'agit d'une capture d'écran ni où le rédacteur technique naviguait lorsqu'il a écrit les instructions. La description de l'image est basée sur le contexte de la raison pour laquelle l'image a été incluse en premier lieu.

Si la capture d'écran montre comment trouver le numéro de version du navigateur en accédant à chrome://version/, incluez l'URL dans le contenu de la page sous forme d'instructions et fournissez une chaîne vide comme attribut alt, car l'image ne fournit aucune information qui ne figure pas dans le texte environnant.

Si l'image ne fournit aucune information supplémentaire ou est purement décorative, l'attribut doit quand même être présent, mais sous la forme d'une chaîne vide.

<img src="svg/magazine.svg" alt="" role="none" />

MachineLearningWorkshop.com comporte sept images de premier plan, donc sept images avec des attributs alt : un interrupteur en forme d'œuf de Pâques, une icône manuelle, deux photos biographiques de Hal et Eve, et trois avatars d'un mixeur, d'un aspirateur et d'un grille-pain. L'image au premier plan qui ressemble à un magazine est la seule qui soit purement décorative. La page comporte également deux images de fond. Ces images sont décoratives et ont été ajoutées avec CSS. Elles sont donc inaccessibles.

Le magazine étant purement décoratif, son attribut alt est vide et son role est défini sur none, car l'image est un SVG purement décoratif. Si elles sont pertinentes, les images SVG doivent inclure role="img".

<img src="svg/magazine.svg" alt="" role="none" />

En bas de la page, trois avis sont affichés, chacun accompagné d'une image de l'affiche. En général, le texte alt correspond au nom de la personne représentée.

<img src="images/blender.svg" alt="Blendan Smooth" role="img" />

En revanche, comme il s'agit d'une page humoristique, vous devez transmettre ce qui n'est peut-être pas évident pour les utilisateurs malvoyants afin qu'ils ne passent pas à côté de l'humour. Nous utilisons la fonction machine d'origine comme alt au lieu d'utiliser le nom du personnage :

<img src="images/blender.svg" alt="blender" role="img" />

Les photos des instructeurs ne sont pas de simples avatars : ce sont des images biographiques qui bénéficient donc d'une description plus détaillée.

S'il s'agissait d'un vrai site, vous fourniriez une description minimale de l'apparence de l'enseignant, afin qu'un futur élève puisse le reconnaître en entrant dans la salle de classe.

<img src="svg/hal.svg" role="img"
  alt="Hal 9000; a camera lens containing a red dot that sometimes changes to yellow." />

Comme il s'agit d'un site de blagues, fournissez les informations pertinentes dans le contexte de la blague :

<img src="svg/hal.svg" role="img"
  alt="Hal 9000, the sentient AI computer from 2001: a Space Odyssey depicted as a camera lens with a red dot that changes to yellow when hovered." />

Si vous lisiez la page à un ami au téléphone, il ne se soucierait pas de l'apparence du point rouge. Dans ce cas, l'historique de la référence au film est important.

Lorsque vous rédigez un texte descriptif, réfléchissez aux informations importantes et pertinentes pour l'utilisateur que l'image transmet, puis incluez-les. N'oubliez pas que le contenu de l'attribut alt d'une image diffère selon le contexte. Toutes les informations pertinentes pour le contexte auxquelles un utilisateur voyant peut accéder dans une image doivent être transmises, et rien de plus. Soyez bref, précis et utile.

Les attributs src et alt sont des exigences minimales pour les images intégrées. Nous devons aborder quelques autres attributs.

Images responsives

Il existe une myriade de tailles de fenêtre d'affichage et de résolutions d'écran. Vous ne voulez pas gaspiller la bande passante d'un utilisateur mobile en lui servant une image suffisamment large pour un moniteur à grand écran, mais vous pouvez servir des images de résolution supérieure pour les petits appareils qui ont quatre fois la résolution d'écran normale. Il existe plusieurs façons de diffuser différentes images en fonction de la taille de la fenêtre d'affichage et de la résolution de l'écran.

<img> srcset attribut

L'attribut srcset permet de suggérer plusieurs fichiers image. Le navigateur sélectionne l'image à demander en fonction de plusieurs requêtes média, y compris la taille de la fenêtre d'affichage et la résolution de l'écran.

Il ne peut y avoir qu'un seul attribut srcset par élément <img>, mais ce srcset peut renvoyer à plusieurs images. L'attribut srcset accepte une liste de valeurs séparées par une virgule. Chacune d'elles contient l'URL du composant, suivie d'un espace, puis des descripteurs de cette option d'image. Si un descripteur de largeur est utilisé, vous devez également inclure l'attribut sizes avec une requête média ou une taille de source pour chaque option srcset, à l'exception de la dernière. Nous vous recommandons de lire les sections "Apprendre" sur les images responsives avec srcset et les syntaxes descriptives.

L'image srcset est prioritaire sur l'image src en cas de correspondance.

<picture> et <source>

Une autre méthode pour fournir plusieurs ressources et permettre au navigateur d'afficher l'élément le plus approprié consiste à utiliser l'élément <picture>. L'élément <picture> est un élément de conteneur pour plusieurs options d'image listées dans un nombre illimité d'éléments <source> et un seul élément <img> obligatoire.

Les attributs <source> incluent srcset, sizes, media, width et height. L'attribut srcset est commun à img, source et link, mais il est généralement implémenté légèrement différemment sur la source, car les requêtes média peuvent être listées dans l'attribut média de <srcset>. <source> accepte également les formats d'image définis dans l'attribut type.

Le navigateur examine chaque élément enfant <source> et choisit celui qui correspond le mieux. Si aucune correspondance n'est trouvée, l'URL de l'attribut src de l'élément <img> est sélectionnée. Le nom accessible provient de l'attribut alt du <img> imbriqué. Nous vous recommandons également de lire les sections "Learn" (Apprendre) sur l'élément <picture> et les syntaxes prescriptives.

Fonctionnalités de performances supplémentaires

Il existe plusieurs fonctionnalités d'image supplémentaires qui peuvent améliorer les performances de votre site.

Chargement différé

L'attribut loading indique au navigateur compatible avec JavaScript comment charger l'image. La valeur par défaut eager signifie que l'image est chargée immédiatement lors de l'analyse du code HTML, même si elle se trouve en dehors de la fenêtre d'affichage visible. En définissant loading="lazy", le chargement de l'image est différé jusqu'à ce qu'elle soit susceptible d'apparaître dans la fenêtre d'affichage. La probabilité est définie par le navigateur en fonction de la distance entre l'image et la fenêtre d'affichage. Cette valeur est mise à jour lorsque l'utilisateur fait défiler l'écran. Le chargement différé permet d'économiser de la bande passante et du processeur, ce qui améliore les performances pour la plupart des utilisateurs. Si JavaScript est désactivé, toutes les images sont définies par défaut sur eager pour des raisons de sécurité.

<img src="switch.svg" alt="light switch" loading="lazy" />

Format

Les navigateurs commencent à afficher le code HTML lorsqu'il est reçu et à demander des ressources lorsqu'ils en rencontrent. Cela signifie que le navigateur affiche déjà le code HTML lorsqu'il rencontre la balise <img> et envoie la requête. Le chargement des images peut prendre du temps. Par défaut, les navigateurs ne réservent pas d'espace pour les images, à l'exception de la taille requise pour afficher le texte alt.

L'élément <img> a toujours accepté les attributs height et width sans unité. Ces propriétés sont tombées en désuétude au profit du CSS. Le CSS peut définir les dimensions des images, en définissant souvent une seule dimension telle que max-width: 100%; pour s'assurer que le format est conservé.

Comme le CSS est généralement inclus dans <head>, il est analysé avant toute rencontre avec <img>. Toutefois, sans indiquer explicitement le format height, l'espace réservé correspond à la hauteur (ou à la largeur) du texte alt.

Lorsque les développeurs ne déclarent qu'une largeur, la réception et le rendu des images entraînent un décalage de mise en page cumulatif, ce qui nuit aux Web Vitals. Pour résoudre ce problème, les navigateurs sont compatibles avec les formats d'image. L'inclusion des attributs height et width sur <img> sert d'indication de taille, informant le navigateur du format, ce qui permet de réserver la bonne quantité d'espace pour le rendu final de l'image. Lorsque le navigateur rencontre une seule dimension, comme dans notre exemple de 50 %, il réserve de l'espace pour l'image en respectant la dimension CSS, l'autre dimension conservant le rapport d'aspect largeur/hauteur.

<img src="switch.svg" alt="light switch" role="img" width="70" height="112" />

Vos images sont responsives si le CSS a été configuré correctement pour les rendre responsives. Oui, les valeurs height et width sans unité incluses sont remplacées par le code CSS. L'objectif de l'inclusion de ces attributs est de réserver l'espace avec le bon format, ce qui améliore les performances en réduisant le décalage de mise en page. Le temps de chargement de la page restera approximativement le même, mais l'UI ne sautera pas lorsque l'image sera affichée à l'écran.

Autres fonctionnalités d'image

L'élément <img> est également compatible avec les attributs crossorigin, decoding, referrerpolicy et, dans les navigateurs basés sur Blink, fetchpriority. Si l'image fait partie d'une carte côté serveur, incluez l'attribut booléen ismap et imbriquez <img> dans un lien pour les utilisateurs sans dispositif de pointage.

L'attribut ismap n'est pas nécessaire, ni même pris en charge, sur <input type="image" name="imageSubmitName">, car les coordonnées x et y de l'emplacement du clic sont envoyées lors de l'envoi du formulaire, en ajoutant les valeurs au nom de l'entrée, le cas échéant. Par exemple, un élément tel que &imageSubmitName.x=169&imageSubmitName.y=66 est envoyé avec le formulaire lorsque l'utilisateur clique sur l'image pour l'envoyer. Si l'image ne comporte pas d'attribut name, les coordonnées x et y sont envoyées : &x=169&y=66.

Vérifier que vous avez bien compris

Testez vos connaissances sur les images.