<img>

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> :

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.