Balise HTML <img>
Définition et utilisation
<img> La balise est utilisée pour insérer des images dans les pages HTML.
Techniquement, l'image n'est pas réellement insérée dans la page Web, mais liée à la page.<img> La balise crée un conteneur pour référencer l'image.
<img> Les balises ont deux attributs obligatoires :
- src - Définir le chemin de l'image
- alt - Si pour une raison quelconque l'image ne peut pas être affichée, spécifiez le texte alternatif de l'image
Remarque :De plus, il est toujours nécessaire de spécifier la largeur et la hauteur de l'image. Si la largeur et la hauteur ne sont pas spécifiées, la page peut clignoter lors du chargement de l'image.
Astuce :Pour lier une image à un autre document, il suffit de mettre <img> Balise imbriquée <a> À l'intérieur des balises (voir l'exemple ci-dessous).
Veuillez également consulter :
Tutoriel HTML :Image HTML
Manuel de référence HTML DOM :Objet Image
Tutoriel CSS :Définir le style de l'image
Lisez également :Comment utiliser correctement l'image
Exemple
Exemple 1
Dans les exemples suivants, nous insérons une photo de tulipes prise à Shanghai Flower Port par un ingénieur de CodeW3C.com :
<img src="tulip.jpg" alt="Shanghai Flower Port - Tulip" />
Exemple 2
Un autre exemple d'insertion d'image :
<img src="dancer.png" alt="Dancer" width="500" height="749">
Astuce :Plus d'exemples sont fournis en bas de la page.
Attribut
| Attribut | Valeur | Description |
|---|---|---|
| alt | Texte | Définir le texte alternatif de l'image. |
| crossorigin |
|
Permettre l'utilisation d'images provenant de sites tiers autorisés à accéder à travers des origines multiples avec l'image et le canvas (canvas). |
| height | Pixels | Définir la hauteur de l'image. |
| ismap | ismap | Définir l'image comme une carte d'image côté serveur. |
| loading |
|
Spécifier si le navigateur doit charger immédiatement l'image ou retarder le chargement jusqu'à ce que certaines conditions soient remplies. |
| longdesc | URL | Définir l'URL pointant vers une description détaillée de l'image. |
| referrerpolicy |
|
Définir les informations de référence à utiliser lors de l'obtention de l'image. |
| sizes | Taille | Définir la taille de l'image pour différentes conceptions de page. |
| src | URL | Définir le chemin de l'image. |
| srcset | URL-list | Définir la liste des fichiers d'images utilisés dans différentes situations. |
| usemap | #mapname | Définir l'image comme une carte d'image client. |
| width | Pixels | Définir la largeur de l'image. |
Propriétés globales
<img> Les balises prennent également en charge Propriétés globales dans HTML.
Propriétés d'événement
<img> Les balises prennent également en charge Propriétés d'événement dans HTML.
Plus d'exemples
Exemple 3
Aligner l'image (en utilisant CSS) :
<img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:bottom"> <img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:middle"> <img src="flower.gif" alt="[#1#]" width="90" height="90" style="vertical-align:top"> <img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:right"> <img src="flower.gif" alt="[#1#]" width="90" height="90" style="float:left">
Exemple 4
Ajouter un cadre à l'image (en utilisant CSS) :
<img src="flower.gif" alt="[#1#]" style="border:5px solid black">
Exemple 5
Ajouter des marges gauche et droite à l'image (en utilisant CSS) :
<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:0px 50px">
Exemple 6
Ajouter des marges supérieure et inférieure à l'image (en utilisant CSS) :
<img src="flower.gif" alt="[#1#]" style="vertical-align:middle;margin:50px 0px">
Exemple 7
Comment insérer une image depuis un autre dossier ou un autre site web :
<img src="/photo/flower.gif" alt="Flower" width="180" height="180"> <img src="https://www.codew3c.com/photo/tree.png" alt="Tree" width="150" height="161">
Exemple 8
Comment ajouter un lien hypertexte à une image :
<a href="https://www.codew3c.com"> <img src="w3logo.png" alt="codew3c.com" width="400" height="225"> </a>
Exemple 9
Comment créer une image map avec des zones cliquables. Chaque zone est un lien hypertexte :
<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451"> <map name="lifemap"> <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html"> <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html"> <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html"> </map>
Lecture recommandée - Comment utiliser correctement les images
L'une des caractéristiques les plus remarquables de HTML et XHTML est la capacité à inclure des images dans le texte du document, que ce soit en tant qu'objet interne du document (image en ligne) ou en tant que document séparé téléchargeable via un lien hypertexte, ou en tant que fond du document.
L'ajout raisonnable d'images (icônes statiques ou animées, photos, explications, dessins, etc.) dans le contenu du document rendra le document plus vivant et plus captivant, et aura l'air plus professionnel, plus informatif et plus facile à naviguer. Il est également possible de rendre une image visible comme une carte de guide hypertexte clickable.
Cependant, si les images sont utilisées de manière excessive, le document deviendra fragmenté, désordonné et difficile à lire, ce qui ajoutera beaucoup de temps inutile au téléchargement et à la visualisation de la page par l'utilisateur.
Veuillez lire l'article suivant pour apprendre sur les deux principaux formats d'images sur le Web : GIF et JPEG, ainsi que sur la manière de les utiliser correctement :
Paramètres CSS par défaut
La plupart des navigateurs utiliseront les valeurs par défaut suivantes pour afficher <img> Élément :
img {
display: inline-block;
}
Support du navigateur
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Support | Support | Support | Support | Support |
