Cours HTML / Insérer des images avec img : texte alternatif et dimensions

Pour ajouter une image à un document HTML, mettez son URL de fichier dans l'attribut src de l'élément img et décrivez son contenu pertinent dans alt. Définissez width et height sur les dimensions intrinsèques de l'image afin que le navigateur puisse réserver de l'espace avant que le fichier ne se charge.

Insérer une image avec img

L'élément img intègre une image et n'a pas de balise de fermeture. Utilisez l'image d’exemple représentant un lac et un arbre pour essayer le code suivant. Résolvez l'adresse du fichier en utilisant les exemples de chemin relatif dans Liens : Chemins, Fragments de page et Email.

<img src="html-image-sample-lake-tree-1600-v1.webp"
     alt="Un arbre sur un îlot au milieu d’un lac, avec des montagnes à l’arrière-plan"
     width="1600" height="900">

1. Téléchargez l'image exemple et enregistrez-la à côté du fichier HTML que vous éditez, par exemple index.html.
2. Insérez le code ci-dessus dans le fichier HTML body et enregistrez le fichier.
3. Ouvrez ou actualisez le fichier HTML dans un navigateur. Vous devriez voir la photo du lac affichée ci-dessous.

src identifie le fichier par rapport à l'emplacement du fichier HTML. Le code ci-dessus cherche l'image dans le même dossier. Si vous l'avez sauvegardée dans un sous-dossier images, changez l'attribut en src="images/html-image-sample-lake-tree-1600-v1.webp". Le nom du fichier et l'extension doivent également correspondre au fichier réel.

Cliquer sur l'image ici ouvre le fichier original. Encadrer une image avec un lien est une fonctionnalité distincte de l'insertion avec img.

Que doit dire l'attribut alt ?

alt est un texte alternatif. Il fournit aux lecteurs qui ne peuvent pas voir l'image, ou dont le navigateur ne peut pas la charger, l'information que l'image apporte dans le contexte. Décrivez ce rôle brièvement au lieu d'écrire « image » ou une liste de mots-clés pour la recherche. Pour une légende visible par tous, comparez l'explication dans Grouper Images et Légendes avec figure et figcaption.

<img src="html-image-sample-lake-tree-1600-v1.webp"
     alt="Un arbre sur un îlot au milieu d’un lac, avec des montagnes à l’arrière-plan"
     width="1600" height="900">

Si une image est purement décorative et répète une information proche, un alt="" vide peut être approprié. La valeur vide l'identifie comme non essentielle ; omettre l'attribut alt ne communique pas cette intention. Si l'image transmet une information essentielle, expliquez-la dans le texte alternatif ou dans le texte adjacent. L’arbre décisionnel W3C WAI sur le texte alternatif aide dans les cas ambigus.

Que font la largeur et la hauteur ?

Le fichier exemple fait 1600×900 pixels. Ses valeurs width="1600" et height="900" aident le navigateur à calculer le rapport d'aspect à l'avance. Ces attributs ne réduisent pas la taille en octets du fichier image ni le nombre de pixels. Testez la sélection de la taille du fichier séparément des modifications de recadrage dans Images adaptatives : srcset, sizes et picture.

Si l'image est plus large que la zone de contenu, le CSS peut limiter sa largeur affichée tout en conservant le rapport d'aspect.

img {
  max-width: 100%;
  height: auto;
}

Dans un fichier HTML autonome, mettez ce CSS dans un élément style dans le head ou dans une feuille de style liée. Les dimensions de l'image décrivent le rapport du fichier ; le CSS contrôle sa taille affichée actuelle.

Pour envoyer un fichier plus petit, vous avez besoin d'une image redimensionnée séparément. Le tutoriel sur les images adaptatives explique comment srcset et sizes permettent au navigateur de choisir parmi les fichiers image.

Si l'image n'apparaît pas

• Vérifiez le nom exact du fichier et l'extension dans src.
• Vérifiez le dossier de l'image par rapport au fichier HTML.
• Ouvrez l'URL de l'image directement dans un navigateur pour voir si le fichier est disponible.
• Ne présumez pas que des dimensions affichées plus petites signifient un fichier téléchargé plus petit.

La référence de l'élément img sur MDN décrit les attributs disponibles et leur comportement.