La balise <img> est utilisée pour intégrer des images dans une page web. Cette balise est essentielle pour rendre une interface utilisateur visuellement attractive et transmettre des informations via des contenus graphiques (comme les images par exemple).
Elle est autonome (on parle de "self-closing" 🇺🇸 - ce qui veut dire qu'elle se ferme sur elle-même) et nécessite des attributs obligatoires tels que src (source de l'image) et alt (texte alternatif).
Structure et syntaxe de balise <img />
La balise <img> est une balise vide (elle n'englobe pas d'autres balises). Elle peut être stylisée grâce à l'attribut style ou encore avec les classes (class) et les identifiants (id) tout comme la plupart des balises HTML.
Syntaxe
<img src="[URL]" alt="[DESCRIPTION]">L'attribut alt permet de définir le texte alternatif.
Cet attribut est facultatif mais est très recommandé si vous souhaitez avoir un bon référencement sur les moteurs de recherche, ou même de manière générale, pouvoir apporter des informations textuelles pour les malvoyants.
Exemple d'utilisation
<img
src="https://believemy.com/images/site/brand/believemy-new-logo-full-black.svg"
alt="Logo de Believemy"
style="width: 300px"
>Dans cet exemple, nous affichons l'image qui se situe à l'adresse indiquée dans l'attribut src. Nous lui associons un texte alternatif avec l'attribut alt puis nous lui donnons une largeur de 300 pixels avec l'attribut style.
Essayez par vous-même ici :
Il est possible d'utiliser cette balise sous deux formes différentes :
- <img> pour sa version valide avec le HTML5 ;
- <img /> pour sa version valide avec le HTML5 ainsi que le XHTML.
Il n'est donc pas rare de voir l'une ou l'autre des syntaxes, les deux étant très utilisées.
Attributs
Voici les principaux attributs pour la balise <img> :
| Attribut | Description | Valeur possible |
|---|---|---|
src | Spécifie le chemin ou l'URL de l'image. | Chemin relatif ou absolu. |
alt | Fournit une description textuelle de l'image pour les lecteurs d'écran ou en cas de non-chargement. | Texte descriptif. |
width | Définit la largeur de l'image. | Valeur en pixels ou pourcentage. |
height | Définit la hauteur de l'image. | Valeur en pixels ou pourcentage. |
title | Affiche une info-bulle lorsqu'on survole l'image. | Texte descriptif. |
loading | Contrôle le comportement de chargement de l'image. | lazy, eager, ou auto. |
srcset | Fournit plusieurs sources pour le chargement d'images adaptées à différentes résolutions. | Liste de sources avec dimensions. |
sizes | Indique la largeur d'affichage de l'image pour les navigateurs. | Largeur en unité CSS (ex. 100vw). |
referrerpolicy | Définit la politique de référent HTTP pour les requêtes d'image. | no-referrer, origin, strict-origin, etc. |
usemap | Associe l'image à une carte d'image définie par <map>. | Nom de la carte (ex. #nom-carte). |
crossorigin | Définit la politique CORS pour l'image. | anonymous, use-credentials. |
Compatibilité des navigateurs
La balise <img> est compatible avec tous les navigateurs modernes. Toutefois, certains attributs avancés, tels que loading ou referrerpolicy, peuvent ne pas être pris en charge dans des versions anciennes.
| Navigateur | Compatibilité générale | Notes |
|---|---|---|
| Chrome | Oui | Supporte loading=lazy. |
| Firefox | Oui | Supporte srcset. |
| Safari | Oui | Attention au comportement des formats d'image modernes (ex. AVIF). |
| Edge | Oui | |
| Internet Explorer 11 | Partiellement | Pas de support pour srcset. |