Images

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

La principale méthode pour inclure des images consiste à utiliser la balise <img> avec l'attribut src faisant référence à une ressource 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 les 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 fonctionnalité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" />

Cela peut également être fait avec l'élément <picture>, avec des enfants <source>, qui utilise un <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 des méthodes d'image responsive HTML intégrées, le code HTML permet également d'améliorer les performances d'affichage des images à l'aide de divers attributs. La balise <img>, et donc les boutons d'envoi graphiques <input type="image">, peuvent inclure des attributs height et width pour définir le format de l'image et réduire le décalage de la mise en page du contenu. L'attribut lazy active le chargement différé.

HTML permet également d'inclure des images SVG à l'aide de <svg> directement, 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 l'image intégrée. L'attribut src permet de fournir l'URL de l'image. Le navigateur récupère ensuite l'élément et l'affiche sur la page. Cet attribut est requis par <img>. Sans lui, il n'y a rien à afficher.

L'attribut alt fournit un texte alternatif pour l'image, avec une description de l'image pour les personnes qui ne peuvent pas voir l'écran (par exemple, les moteurs de recherche et les technologies d'assistance, et même Alexa, Siri et l'Assistant Google). Le navigateur peut l'afficher si l'image ne se charge pas. Outre les utilisateurs dont les réseaux sont lents ou dont la bande passante est limitée, le texte alt est incroyablement 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", qui est nécessaire en raison de bugs VoiceOver.

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

Rédiger des descriptions d'images alt efficaces

Les attributs alt ont pour but d'être courts et concis. Ils fournissent toutes les informations pertinentes transmises par l'image tout en omettant les informations redondantes par rapport à d'autres contenus du document ou inutiles. Dans la rédaction du texte, le ton doit reflétant le ton du site.

Pour rédiger un texte alternatif efficace, imaginez que vous lisez la page entière à 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 inutile d'inclure "This is an image/screenshot/photo of" dans alt. L'utilisateur n'a pas besoin de savoir qu'il y a une image, mais il a besoin de savoir quelles informations l'image transmet.

Normalement, vous ne devez pas dire : "Voici une image granuleuse d'un chien portant un chapeau rouge". Au lieu de cela, vous devez transmettre ce que l'image véhicule par rapport au contexte du reste du document, et ce que vous transmettez changera en fonction du contexte et du contenu du texte environnant.

Par exemple, la photo d'un chien sera décrite de différentes manières en fonction du contexte. Si Fluffy est un avatar à côté d'un avis pour de la nourriture pour chien 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 parent potentiel. Le texte doit décrire les informations transmises dans l'image qui sont pertinentes pour l'utilisateur et qui ne sont pas dupliquées dans le texte environnant. Une description plus longue, comme 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 genre de l'animal de compagnie adoptable. Il n'est donc pas nécessaire de le répéter dans le texte alternatif. Mais la biographie écrite du chien n'inclut probablement pas la longueur de ses cheveux, les couleurs ou les préférences en matière de jouets. Notez que nous n'avons pas décrit l'image: le propriétaire potentiel du chien n'a pas besoin de savoir si le chien se trouve à l'intérieur ou à l'extérieur, ou s'il a un collier rouge et un laisse bleu.

Lorsque vous utilisez des images à des fins d'iconographie, étant donné que 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 en forme de loupe est search. L'icône qui ressemble à une maison a home comme texte alternatif. 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 anti-modèles, le chien souriant dans un béret vert peut avoir alt="good" défini, tandis que le chien grognon sur un béret rouge peut lire alt="bad". Cela dit, n'utilisez que l'iconographie standard. Si vous utilisez des icônes non standards, telles que les bonnes et les mauvaises icônes, ajoutez une légende et assurez-vous que les icônes ne sont pas les seuls moyens de déchiffrer la signification de vos éléments d'interface utilisateur.

Si l'image est une capture d'écran ou un graphique, écrivez ce que vous avez appris de l'image plutôt que de décrire l'apparence. Même si une image vaut mieux qu'un long discours, la description doit transmettre de manière concise tout ce qui a été appris.

Omettre les informations que l'utilisateur connaît déjà du contexte et dont il est informé dans le contenu. Par exemple, si vous consultez une page de tutoriel sur la modification des paramètres du navigateur et que la page consiste à cliquer sur des icônes dans le navigateur Chrome, l'URL de la page dans la capture d'écran n'est pas importante. Limitez les alt au sujet concerné: comment modifier les paramètres. 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 "atelier de machine learning", car l'utilisateur n'a pas besoin de savoir qu'il s'agit d'une capture d'écran et n'a pas besoin de savoir où le rédacteur technique survenait lorsqu'il a écrit les instructions. La description de l'image est basée sur le contexte de la raison pour laquelle elle 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 comme instructions et fournissez une chaîne vide en tant qu'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 toujours être présent, comme une chaîne vide.

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

MachineLearningWorkshop.com compte sept images au premier plan, donc sept images avec des attributs alt : un interrupteur easter egg, une icône manuelle, deux photos biographiques d'Hal et d'Eve, et trois avatars : un mixeur, un aspirateur et un grille-pain. L'image de premier plan qui ressemble à un magazine est la seule qui soit purement décorative. La page comporte également deux images de fond. Il s'agit également d'images décoratives, qui ne sont pas accessibles, car elles sont ajoutées avec CSS.

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

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

Trois avis s'affichent en bas de la page, chacun avec une image de l'auteur. Généralement, le texte alt correspond au nom de la personne sur la photo.

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

Étant donné qu'il s'agit d'une page de blague, vous devez transmettre ce qui n'est pas visible pour les utilisateurs atteints de déficience visuelle 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 et donc une description plus détaillée.

S'il s'agissait d'un site réel, vous fourniriez la description stricte de l'enseignant afin qu'un élève potentiel puisse le reconnaître en entrant dans la 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 blague, fournissez plutôt les informations pertinentes dans ce contexte:

<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 par téléphone, il ne se soucierait pas de l'apparence du point rouge. Dans ce cas, l'historique de la référence du film est important.

Lorsque vous rédigez un texte descriptif, réfléchissez aux informations transmises par l'image qui sont importantes et pertinentes pour l'utilisateur, et incluez-les. N'oubliez pas que le contenu de l'attribut alt d'une image varie en fonction du contexte. Toutes les informations transmises dans une image à laquelle un utilisateur voyant peut accéder et qui sont pertinentes par rapport au contexte sont ce qui doit être transmis ; rien de plus. Soyez bref, précis et utile.

Les attributs src et alt sont des exigences minimales pour les images intégrées. Il existe d'autres attributs dont nous devons parler.

Images responsives

Il existe une multitude de tailles de fenêtre d'affichage. Il existe également différentes résolutions d'écran. Vous ne souhaitez pas gaspiller la bande passante d'un utilisateur mobile en lui fournissant une image suffisamment large pour un grand écran, mais vous pouvez diffuser 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 d'afficher 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 d'écran.

Il peut y avoir un seul attribut srcset par élément <img>, mais cet srcset peut être associé à plusieurs images. L'attribut srcset accepte une liste de valeurs séparées par des virgules, chacune contenant l'URL de l'élément suivie d'un espace suivi de descripteurs pour cette option d'image. Si vous utilisez un descripteur de largeur, 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 invitons à lire les sections de Learn qui traitent des images responsives avec srcset et des syntaxes descriptives.

En cas de correspondance, l'image srcset prévaut sur l'image src.

<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 conteneur pour plusieurs options d'image répertorié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 répertoriées dans l'attribut multimédia du <srcset>. <source> accepte également les formats d'image définis dans l'attribut type.

Le navigateur examinera chaque élément <source> enfant et choisira la meilleure correspondance. 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 invitons également à lire les sections "Learn" concernant l'élément <picture> et les syntaxes prescriptives.

Fonctionnalités de performances supplémentaires

Chargement différé

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

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

Proportions

Les navigateurs commencent à afficher le code HTML dès qu'il est reçu et envoient des demandes d'éléments lorsqu'ils le 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 aussi prendre un certain temps. Par défaut, les navigateurs ne réservent pas d'espace aux images autres que 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 ont cessé d'être utilisées au profit du CSS. Le CSS peut définir les dimensions de l'image, en définissant souvent une seule dimension comme max-width: 100%; pour garantir que le format est préservé. Comme le CSS est généralement inclus dans le <head>, il est analysé avant qu'un <img> ne soit détecté. Toutefois, sans indiquer explicitement le height ou le format, l'espace réservé correspond à la hauteur (ou à la largeur) du texte alt. La plupart des développeurs ne déclarant qu'une largeur, la réception et l'affichage des images entraînent un décalage de mise en page cumulatif qui nuit à Web Vitals. Pour résoudre ce problème, les navigateurs acceptent les formats d'image. L'inclusion d'attributs height et width dans <img> sert de suggestions de dimensionnement. Elle informe le navigateur du format, ce qui permet de réserver l'espace approprié pour le rendu final de l'image. En incluant une valeur de hauteur et de largeur sur une image, le navigateur connaît le format de cette image. Lorsque le navigateur rencontre une seule dimension, comme les 50% dans notre exemple, il économise de l'espace pour que l'image adhère à la dimension CSS et que l'autre dimension conserve le rapport largeur/hauteur.

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

Vos images seront toujours responsives si le CSS a été configuré correctement pour les rendre responsives. Oui, les valeurs height et width sans unité incluses seront remplacées par CSS. L'inclusion de ces attributs permet de réserver l'espace au bon format, ce qui améliore les performances en réduisant le décalage de la mise en page. Le chargement de la page reste à peu près le même, mais l'interface utilisateur ne saute pas lorsque l'image est affichée à l'écran.

Autres caractéristiques de l'image

L'élément <img> est également compatible avec les attributs crossorigin, decoding, referrerpolicy et, dans les navigateurs basés sur Blink, fetchpriority. Rarement utilisé, 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 appareil de pointage.

L'attribut ismap n'est pas nécessaire, voire 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 d'entrée, le cas échéant. Par exemple, &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, "x" et "y" sont envoyés: &x=169&y=66.

Testez vos connaissances

Testez vos connaissances sur les images.