HTML Images
Les images peuvent améliorer la conception et l’apparence d’une page Web.
HTML Syntaxe des images
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 balise <img> crée un espace de stockage pour l'image référencée.
La balise <img> est vide, elle contient uniquement des attributs et n'a pas de balise de fermeture.
La balise <img> possède deux attributs obligatoires :
- src – Spécifie le chemin d'accès à l'image
- alt – Spécifie un texte alternatif pour l'image
Syntaxe
<img src="url" alt="alternatetext">
L'attribut src
L'attribut src requis spécifie le chemin (URL) de 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 bien au même endroit par rapport à la page Web ; sinon, vos visiteurs recevront une icône de lien rompu. L'icône de lien rompu et le texte alt s'affichent si le navigateur ne trouve pas l'image.
L'attribut alt
L'attribut alt requis fournit un texte alternatif pour une image, si l'utilisateur, pour une raison quelconque, ne peut pas la voir (en raison d'une connexion lente, d'une erreur dans l'attribut src, ou si l'utilisateur utilise un lecteur d'écran).
La valeur de l'attribut alt doit décrire l'image :
Si un navigateur ne trouve pas d'image, il affichera la valeur de l'attribut alt :
Astuce : 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'attribut style 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;">
Try it Yourself »
Vous pouvez également utiliser les attributs width et height :
Les attributs width et height dé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 ?
La width, la height et le style les attributs sont tous valides en HTML.
Cependant, nous vous suggérons d'utiliser l'attribut style. Cela empêche les feuilles de style 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>
Try it Yourself »
Images dans un autre dossier
Si vous avez vos images dans un sous-dossier, vous devez inclure le nom du dossier dans l'attribut src :
Exemple
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Try it Yourself »
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'attribut src :
Exemple
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com">
Try it Yourself »
Remarques sur les images externes : Les images externes peuvent être protégées par le droit d'auteur. Si vous n'obtenez pas l'autorisation de l'utiliser, vous risquez de violer les lois sur le droit d'auteur. De plus, vous ne pouvez pas contrôler les images externes ; il peut être soudainement supprimé ou modifié.
Images animées
Le HTML autorise les GIF animés :
Exemple
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">
Try it Yourself »
Image en tant que lien
Pour utiliser une image comme lien, placez la balise <img> à l'intérieur du <a> étiqueter:
Exemple
<a href="index.html">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Try it Yourself »
Image flottante
Utilisez la propriété CSS float pour laisser l'image flotter à 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>
Try it Yourself »
Astuce : Pour en savoir plus sur CSS Float, lisez notre Tutoriel CSS Float.
Formats d'image courants
Voici les types de fichiers image les plus courants, pris en charge par tous les navigateurs (Chrome, Edge, Firefox, Safari, Opera) :
| Abréviation | Format de fichier | Extension de fichier |
|---|---|---|
| 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
- Utilisez l'élément HTML
<img>pour définir une image - Utilisez l'attribut HTML
srcpour 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 les attributs HTML
widthetheightou le CSS propriétéswidthetheightpour 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.
HTML Exercices
HTML Balises d’images
| Étiquette | Description |
|---|---|
| <img> | Définit une image |
| <map> | Définit une image cliquable |
| <area> | Définit une zone cliquable à l'intérieur d'une image cliquable |
| <picture> | Définit un conteneur pour plusieurs ressources d'image |
Pour une liste complète de toutes les balises HTML disponibles, visitez la Référence des balises HTML sur notre site Web W3SchoolsFR. Le meilleur.
HTML - Images - Vidéo W3Schools
Cette vidéo explique les images au format HTML et offre des conseils sur la façon de les utiliser.
Fait partie d'une série de didacticiels vidéo pour apprendre le HTML pour les débutants !
