Images

Images décoratives, telles que les dégradés d'arrière-plan sur les boutons ou les images de fond sur des sections de contenu ou la page entière sont présentées 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és au code HTML.

La principale méthode d'inclusion d'images consiste à utiliser la balise <img> avec l'élément src. qui référence une ressource image et l'attribut alt décrivant l'image.

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

L'attribut srcset dans <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, ce qui permet de diffuser le fichier image le plus approprié en fonction de la les capacités du navigateur et la taille de la fenêtre d'affichage. L'attribut srcset permet de fournir plusieurs versions d'image. basé sur la résolution et, avec l'attribut sizes, 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 effectuer cette opération avec l'élément <picture>, avec les enfants <source>, qui utilisent <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 de création d'images responsives HTML intégrées, HTML permet également améliorer les performances de rendu grâce à divers attributs. La balise <img>, et donc les boutons d'envoi graphiques <input type="image">, Vous pouvez inclure les attributs height et width pour définir le format de l'image afin de réduire le décalage de la mise en page du contenu. L'attribut lazy active le chargement différé.

HTML accepte également l'inclusion d'images SVG en utilisant directement <svg>, bien que les images SVG Les images avec l'extension .svg (ou en tant que data-uri) peuvent ê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 extrait ensuite l'élément et l'affiche sur la page. Cet attribut est requis par <img>. sans cela, il n'y a rien à afficher.

L'attribut alt fournit un texte de substitution pour l'image, ainsi qu'une description pour les personnes qui ne peuvent pas la 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ée par le navigateur. 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 extrêmement utile en HTML. e-mails, 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 VoiceOver.

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

Rédiger des descriptions d'images alt efficaces

Les attributs alternatifs doivent être courts et concis, et fournir toutes les informations pertinentes transmises par l'image tout en omettant des informations redondantes par rapport à d'autres contenus dans le document ou qui ne sont pas utiles. Lors de la rédaction du texte, le ton doit refléter le ton du site.

Pour rédiger un texte alternatif efficace, imaginez que vous lisez toute 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 bots sont informés que l'élément est une image. Il est redondant d'inclure "Ceci est une image/capture d'écran/photo de". dans alt. L'utilisateur n'a pas doivent savoir qu'il y a une image, mais ils ont besoin de savoir quelles informations l'image transmet.

Normalement, vous ne diriez pas : "Voici une image granuleuse d'un chien portant un chapeau rouge." Vous devez plutôt transmettre l'image transmettre des informations par rapport au contexte du reste du document ; et ce que vous transmettrez changera en fonction du contexte et le contenu du texte qui l'entoure.

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'une avis pour la nourriture pour chien Yuckymeat, alt="Fluffy" suffit.

Si la photo fait partie de la page d'adoption de Fluffy sur un site Web de refuge pour animaux, l'audience cible est le chien potentiel parent. Le texte doit décrire les informations transmises dans l'image qui sont pertinentes pour un utilisateur et qui ne sont pas dupliqué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 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 de longueur de poils, de couleurs, ou des préférences liées aux jouets. Notez que nous n’avons pas décrit l’image: le potentiel propriétaire du chien n’a pas besoin de savoir si le chien est à l'intérieur ou à l'extérieur, ou qu'il possède un collier rouge et une laisse bleue.

Lorsque vous utilisez des images pour l'iconographie, étant donné que l'attribut alt fournit le nom accessible, indiquez 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 comme une maison, contient 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, alt="good" pourrait être défini pour le chien qui sourit dans un béret vert, tandis que le chien ronfle dans un béret rouge peut indiquer alt="bad". Cela dit, n'utilisez que des icônes standard, et si vous utilisez des icônes non standards telles que le bon et le mauvais Fluffy, inclure une légende et s'assurer que les icônes ne sont pas le seul moyen 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 apprenez de l'image plutôt que de décrire l'apparence. Bien qu’une image puisse avoir le sens de mille mots, la description doit transmettre de manière concise tout ce qui est appris.

Omettez les informations que l'utilisateur connaît déjà dans le contexte et dont le contenu lui communique d'autres informations. Par exemple : Si vous consultez un tutoriel sur la modification des paramètres du navigateur et qu'il s'agit de cliquer sur des icônes dans le navigateur Chrome, l'URL de la page dans la capture d'écran n'est pas important. Limitez alt au sujet en question: 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'ajoutez pas de "capture d'écran". ou "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 parcourt les instructions. La description de l'image dépend du contexte pour lequel 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 contenu de la page comme instructions et une chaîne vide en tant qu'attribut alt, car l'image ne fournit aucune information qui ne se trouve pas dans le texte environnant.

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

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

MachineLearningWorkshop.com a sept images au premier plan, soit sept images avec des attributs alt: un interrupteur lumineux en forme d'œuf de Pâques, une icône manuelle, deux photos biographiques de Hal et Ève, et trois avatars d'un mixeur, d'un aspirateur et d'un grille-pain. La une image de premier plan qui ressemble à un magazine est la seule à être purement décorative. La page contient également deux images de fond, ces éléments sont également décoratifs et, comme ils sont ajoutés avec CSS, sont inaccessibles.

Le magazine, qui est purement décoratif, comporte un attribut alt vide et un role de none, car l'image est purement SVG de présentation. Si elles ont du sens, les images SVG doivent inclure role="img".

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

Trois avis figurent en bas de la page, chacun étant accompagné d'une image de l'auteur. Généralement, le texte alt est le nom de la personne sur la photo.

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

Au lieu de cela, comme il s'agit d'une page de blagues, vous devez transmettre ce qui n'est peut-être pas visible pour les utilisateurs malvoyants afin qu'ils ne manquent pas la humour ; nous utilisons la fonction de machine d'origine comme alt au lieu du nom du caractère:

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

Les photos des instructeurs ne sont pas de simples avatars: il s'agit d'images biographiques et reçoivent donc une description plus détaillée.

S'il s'agissait d'un site réel, vous fourniriez la description minimale de ce à quoi ressemble l'enseignant afin qu'un étudiant potentiel puisse à les reconnaître lorsqu'ils entrent 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." />

Étant donné qu'il s'agit d'un site de blagues, fournissez plutôt des informations pertinentes en 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 étiez en train de lire la page à un ami par téléphone, il ne se soucie pas de l'apparence du point rouge. Dans ce cas, de référence au film est importante.

Lorsque vous rédigez un texte descriptif, tenez compte des informations importantes et pertinentes pour l'utilisateur transmises par l'image et les inclure. N'oubliez pas que le contenu de l'attribut alt d'une image diffère selon le contexte. Toutes les informations transmises dans une image auquel un utilisateur voyant peut accéder et qui est pertinent par rapport au contexte est ce qui doit être transmis ; rien de plus. Soyez concis, précis, et utiles.

Les attributs src et alt constituent la configuration minimale requise pour les images intégrées. Il y a quelques autres attributs que nous devons aborder.

Images responsives

Il existe une multitude de tailles de fenêtre d'affichage. Il existe également différentes résolutions d'écran. Vous ne voulez pas gaspiller l'espace de stockage d'un utilisateur mobile bande passante en leur fournissant une image suffisamment large pour un grand écran, mais vous pouvez choisir une résolution plus élevée pour les appareils de petite taille avec une résolution d'écran quatre fois supérieure à la normale. Il existe plusieurs façons de diffuser des 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 attribut srcset peut être associé à plusieurs images. srcset accepte une liste de valeurs séparées par une virgule, chacune contenant l'URL de l'élément suivie d'un espace suivi de pour cette option d'image. Si un descripteur de largeur est utilisé, vous devez également inclure l'attribut sizes avec un élément la taille de la requête ou de la source pour chaque option srcset autre que la dernière. Les sections "Apprendre" sur les images responsives avec srcset et les syntaxes descriptives méritent d'être lues.

En cas de correspondance, l'image srcset sera prioritaire sur l'image src.

<picture> et <source>

Pour fournir plusieurs ressources et permettre au navigateur d'afficher l'élément le plus approprié, une autre méthode consiste à utiliser <picture>. L'élément <picture> est un conteneur pour plusieurs options d'image répertoriées dans un nombre illimité de <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é de manière légèrement différente au niveau de 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 prend en compte chaque élément <source> enfant 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é. Le nom accessible provient de l'attribut alt du <img> imbriqué. Les sections "Apprendre" qui couvrent l'élément <picture> et les syntaxes normatives valent également le détour.

Autres fonctionnalités liées aux performances

Chargement différé

L'attribut loading indique au navigateur compatible JavaScript comment charger l'image. La valeur par défaut eager signifie que l'image est immédiatement chargé lors de l'analyse du code HTML, même si l'image 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'il arrive dans la fenêtre d'affichage. "Probable" est défini par le navigateur en fonction de la distance l'image provient de la fenêtre d'affichage. Ces informations sont mises à jour à mesure que l'utilisateur fait défiler la page. Le chargement différé permet d'économiser de la bande passante et du processeur, et d'améliorer les performances. pour la plupart des utilisateurs. Pour des raisons de sécurité, si JavaScript est désactivé, toutes les images auront la valeur eager par défaut.

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

Format

Les navigateurs commencent à afficher le code HTML lorsqu'il est reçu et envoient des demandes d'éléments lorsqu'il est rencontré. Cela signifie que le navigateur est affiche déjà le code HTML lorsqu'il rencontre la balise <img> et envoie la demande. Par ailleurs, le chargement des images peut prendre un certain temps. Par défaut, les navigateurs ne réservent pas d'espace pour les images, sauf 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 été abandonnées au profit de de CSS. Le CSS peut définir les dimensions de l'image. Souvent, une seule dimension comme max-width: 100%; permet de s'assurer que les proportions sont conservées. Comme le CSS est généralement inclus dans <head>, il est analysé avant qu'un <img> ne soit détecté. Mais sans lister explicitement height ou format, l'espace réservé est 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 cumulatif de la mise en page qui nuit aux statistiques Web Vitals. Pour résoudre ce problème, les navigateurs sont compatibles avec les formats d'image. L'inclusion des attributs height et width dans <img> joue le rôle des conseils de dimensionnement, qui informent le navigateur du format et permettent d'afficher d'espace à réserver pour le rendu final de l'image. En ajoutant une valeur de hauteur et de largeur à une image, le navigateur connaît le format de cette image. Lorsque le navigateur rencontre une seule dimension, comme dans notre exemple des 50 %, il permet d'économiser de l'espace. pour que l'image respecte 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 responsives si le CSS a été configuré correctement pour les rendre responsives. Oui, le modèle sans unité inclus Les valeurs height et width seront remplacées par le CSS. Le but de l'inclusion de ces attributs est de réserver l'espace à le bon format, ce qui améliore les performances en réduisant le décalage de mise en page. Le chargement de la page sera toujours le même est trop longue à charger, mais l'interface utilisateur ne saute pas lorsque l'image est affichée à l'écran.

Autres caractéristiques des images

L'élément <img> est également compatible avec crossorigin, decoding, referrerpolicy et, dans les navigateurs Blink, fetchpriority. Rarement utilisé, si l'image fait partie d'une carte côté serveur, inclure l'attribut booléen ismap et imbriquer <img> dans un lien pour les utilisateurs sans appareils de pointage.

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

Testez vos connaissances

Testez vos connaissances sur les images.