La balise <img> est utilisée pour inclure une image dans une page web. Elle permet de spécifier l'emplacement de l'image à afficher en utilisant l'attribut src (source). Il est également possible de spécifier des options pour l'image en utilisant d'autres attributs tels que alt (texte alternatif), width et height (dimensions de l'image), title (texte d'infobulle), etc.

Voici un exemple d'utilisation de la balise <img> :

<img src="bicky.png" alt="Bicky Burger" width="200" height="300" style="max-width: 100%; height: auto" />

Il est important de noter que l'attribut "alt" est obligatoire pour des raisons d'accessibilité pour les utilisateurs ayant des difficultés à voir ou des navigateurs qui sont configurés pour ne pas afficher les images. Il est également important d'utiliser des tailles appropriées pour les images pour améliorer les performances de chargement de la page.

Ainsi, il sera utile d'utiliser une balise alt pour une image utile au contenu, afin qu'un lecteur de page puisse transformer l'image en audio mais reste facultatif pour, par exemple, une balise img utilisé pour une icône.

Il est également possible d'utiliser des URL pour les images hébergées sur des sites web externes, il suffit de remplacer le chemin de l'image par l'URL de l'image.

<img src="<https://example.com/images/bicky.jpg>" alt="Bicky Burger" width="200" height="300" style="max-width: 100%" />

Enfin, il est également possible et même conseillé d'utiliser les attributs "srcset" et "sizes" pour spécifier quelle image sera chargée sur quelle taille d'écran. (Voir responsive)

Dossier : “Mes images”

Image : “Le plus beau chat du mondéééé.jpg”

images/le-plus-beau-chat-du-mondeeee.jpg

mes-images/le-plus-beau-chat-du-mondeeee.jpg

mes_images/leplusbeauchatdumonde.jpg