HTML <img> Tag
Exemple
Comment insérer une image :
<img src="img_girl.jpg" alt="Fille en veste" width="500" height="600"> Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et Utilisation
La balise <img> est utilisée pour intégrer une image dans une page HTML.
Les images ne sont pas techniquement insérées dans une page web ; elles sont liées aux pages web. La balise <img> crée un espace réservé pour l'image référencée.
La balise <img> a deux attributs requis :
- src - Spécifie le chemin vers l'image
- alt - Spécifie un texte alternatif pour l'image, si celle-ci ne peut pas être affichée pour une raison quelconque
Remarque : De plus, il est toujours conseillé de spécifier la largeur et la hauteur d'une image. Si la largeur et la hauteur ne sont pas spécifiées, la page peut scintiller pendant le chargement de l'image.
Astuce : Pour lier une image à un autre document, il suffit d'imbriquer la balise <img> à l'intérieur d'une balise <a> (voir exemple ci-dessous).
Support des Navigateurs
| Élément | |||||
|---|---|---|---|---|---|
| <img> | Oui | Oui | Oui | Oui | Oui |
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| alt | texte | Spécifie un texte alternatif pour une image |
| crossorigin | anonymous use-credentials | Permet d'utiliser des images provenant de sites tiers qui autorisent l'accès cross-origin avec canvas |
| height | pixels | Spécifie la hauteur d'une image |
| ismap | ismap | Spécifie une image comme une carte d'image côté serveur |
| loading | eager lazy | Spécifie si un navigateur doit charger une image immédiatement ou différer le chargement des images jusqu'à ce que certaines conditions soient remplies |
| longdesc | URL | Spécifie une URL vers une description détaillée d'une image |
| referrerpolicy | no-referrer no-referrer-when-downgrade origin origin-when-cross-origin unsafe-url | Spécifie quelles informations de référent utiliser lors de la récupération d'une image |
| sizes | tailles | Spécifie les tailles d'image pour différents mises en page de page |
| src | URL | Spécifie le chemin vers l'image |
| srcset | liste-URL | Spécifie une liste de fichiers image à utiliser dans différentes situations |
| usemap | #mapname | Spécifie une image comme une carte d'image côté client |
| width | pixels | Spécifie la largeur d'une image |
Attributs Globaux
La balise <img> prend également en charge les Attributs Globaux en HTML .
Attributs d'Événement
La balise <img> prend également en charge les Attributs d'Événement en HTML .
Plus d'Exemples
Exemple
Aligner l'image (avec CSS) :
<img src="smiley.gif" alt="Visage souriant" width="42" height="42" style="vertical-align:bottom">
<img src="smiley.gif" alt="Visage souriant" width="42" height="42" style="vertical-align:middle">
<img src="smiley.gif" alt="Visage souriant" width="42" height="42" style="vertical-align:top">
<img src="smiley.gif" alt="Visage souriant" width="42" height="42" style="float:right">
<img src="smiley.gif" alt="Visage souriant" width="42" height="42" style="float:left"> Exemple
Ajouter une bordure à l'image (avec CSS) :
<img src="smiley.gif" alt="Visage souriant" width="42" height="42" style="border:5px solid black"> Exemple
Ajouter des marges gauche et droite à l'image (avec CSS) :
<img src="smiley.gif" alt="Visage souriant" width="42" height="42" style="vertical-align:middle;margin:0px 50px"> Exemple
Ajouter des marges haut et bas à l'image (avec CSS) :
<img src="smiley.gif" alt="Visage souriant" width="42" height="42" style="vertical-align:middle;margin:50px 0px"> Exemple
Comment insérer des images d'un autre dossier ou d'un autre site web :
<img src="/images/stickman.gif" alt="Bonhomme" width="24" height="39">
<img src="https://www.formation-ti.org/images/lamp.jpg" alt="Lampe" width="32" height="32"> Exemple
Comment ajouter un lien hypertexte à une image :
<a href="https://www.formation-ti.org">
<img src="w3html.gif" alt="formation-ti.org" width="100" height="132">
</a> Exemple
Comment créer une carte d'image avec des régions cliquables. Chaque région est un lien hypertexte :
<img src="workplace.jpg" alt="Lieu de travail" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Ordinateur" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Téléphone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Tasse de café" href="coffee.htm">
</map> Pages Associées
Tutoriel HTML : Images HTML
Référence DOM HTML : Objet Image
Tutoriel CSS : Styliser les Images
Paramètres CSS par Défaut
La plupart des navigateurs afficheront l'élément <img> avec les valeurs par défaut suivantes :
Exemple
img {
display: inline-block;
}