Images HTML
Les images peuvent améliorer la conception et l'apparence d'une page Web.
Exemple
<img src="pic_trulli.jpg"
alt="Italian Trulli">
Exemple
<img src="img_girl.jpg"
alt="Girl in a jacket">
Exemple
<img src="img_chania.jpg"
alt="Flowers in Chania">
Syntaxe des images HTML
La balise HTML <img>est utilisée pour intégrer une image dans une page Web.
Les images ne sont pas techniquement insérées dans une page Web ; les images sont liées à des pages Web. La <img>balise crée un espace de maintien pour l'image référencée.
La <img>balise est vide, elle ne contient que des attributs et n'a pas de balise fermante.
La <img>balise a deux attributs obligatoires :
- src - Spécifie le chemin vers l'image
- alt - Spécifie un texte alternatif pour l'image
Syntaxe
<img src="url" alt="alternatetext">
L'attribut src
L' srcattribut obligatoire spécifie le chemin (URL) vers l'image.
Remarque : lorsqu'une page Web se charge, c'est le navigateur, à ce moment-là, qui récupère l'image d'un serveur Web et l'insère dans la page. Par conséquent, assurez-vous que l'image reste réellement au même endroit par rapport à la page Web, sinon vos visiteurs obtiendront une icône de lien brisé. L'icône de lien rompu et le alttexte s'affichent si le navigateur ne trouve pas l'image.
Exemple
<img src="img_chania.jpg" alt="Flowers
in Chania">
L'attribut alt
L' altattribut required fournit un texte alternatif pour une image, si l'utilisateur ne peut pas l'afficher pour une raison quelconque (à cause d'une connexion lente, d'une erreur dans l'attribut src ou si l'utilisateur utilise un lecteur d'écran).
La valeur de l' altattribut doit décrire l'image :
Exemple
<img src="img_chania.jpg" alt="Flowers
in Chania">
Si un navigateur ne trouve pas une image, il affichera la valeur de l' alt
attribut :
Exemple
<img src="wrongname.gif" alt="Flowers
in Chania">
Conseil : Un lecteur d'écran est un logiciel qui lit le code HTML et permet à l'utilisateur d'"écouter" le contenu. Les lecteurs d'écran sont utiles pour les personnes malvoyantes ou ayant des difficultés d'apprentissage.
Taille de l'image - Largeur et hauteur
Vous pouvez utiliser l' styleattribut pour spécifier la largeur et la hauteur d'une image.
Exemple
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
Vous pouvez également utiliser les attributs widthet :height
Exemple
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
Les attributs widthet heightdéfinissent toujours la largeur et la hauteur de l'image en pixels.
Remarque : spécifiez toujours la largeur et la hauteur d'une image. Si la largeur et la hauteur ne sont pas spécifiées, la page Web peut scintiller pendant le chargement de l'image.
Largeur et hauteur ou style ?
Les attributs width, heightet stylesont tous valides en HTML.
Cependant, nous suggérons d'utiliser l' styleattribut. Il empêche les feuilles de styles de modifier la taille des images :
Exemple
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
Images dans un autre dossier
Si vous avez vos images dans un sous-dossier, vous devez inclure le nom du dossier dans l' srcattribut :
Exemple
<img src="/images/html5.gif"
alt="HTML5 Icon" style="width:128px;height:128px;">
Images sur un autre serveur/site Web
Certains sites Web pointent vers une image sur un autre serveur.
Pour pointer vers une image sur un autre serveur, vous devez spécifier une URL absolue (complète) dans l' srcattribut :
Exemple
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
Remarques sur les images externes : Les images externes peuvent être sous copyright. Si vous n'obtenez pas la permission de l'utiliser, vous enfreignez peut-être les lois sur le droit d'auteur. De plus, vous ne pouvez pas contrôler les images externes ; il peut soudainement être supprimé ou modifié.
Images animées
HTML autorise les GIF animés :
Exemple
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Image en tant que lien
Pour utiliser une image comme lien, insérez la <img>balise à l'intérieur de la <a>
balise :
Exemple
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;">
</a>
Image flottante
Utilisez la propriété CSS floatpour laisser flotter l'image à droite ou à gauche d'un texte :
Exemple
<p><img src="smiley.gif" alt="Smiley face"
style="float:right;width:42px;height:42px;">
The image will float to the right of
the text.</p>
<p><img src="smiley.gif" alt="Smiley face"
style="float:left;width:42px;height:42px;">
The image will float to the left of
the text.</p>
Conseil : Pour en savoir plus sur CSS Float, lisez notre didacticiel CSS Float .
Formats d'images courants
Voici les types de fichiers image les plus courants, qui sont pris en charge par tous les navigateurs (Chrome, Edge, Firefox, Safari, Opera) :
| Abbreviation | File Format | File Extension |
|---|---|---|
| APNG | Animated Portable Network Graphics | .apng |
| GIF | Graphics Interchange Format | .gif |
| ICO | Microsoft Icon | .ico, .cur |
| JPEG | Joint Photographic Expert Group image | .jpg, .jpeg, .jfif, .pjpeg, .pjp |
| PNG | Portable Network Graphics | .png |
| SVG | Scalable Vector Graphics | .svg |
Résumé du chapitre
<img>Utiliser l' élément HTML pour définir une imagesrcUtilisez l' attribut HTML pour définir l'URL de l'image- Utilisez l'attribut HTML
altpour définir un texte alternatif pour une image, si elle ne peut pas être affichée - Utilisez le HTML
widthet lesheightattributs ou le CSSwidthet lesheightpropriétés pour définir la taille de l'image - Utilisez la propriété CSS
floatpour laisser l'image flotter vers la gauche ou vers la droite
Remarque : Le chargement d'images volumineuses prend du temps et peut ralentir votre page Web. Utilisez les images avec précaution.
Exercices HTML
Balises d'images HTML
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
Pour une liste complète de toutes les balises HTML disponibles, consultez notre Référence des balises HTML .