Comment insérer une image en HTML
Utilisez l'élément <img>. src est le fichier de l'image, alt la décrit, et width et height donnent sa taille en pixels. <img> est un élément vide : il n'a pas de balise fermante.
Ici, le src est un petit SVG écrit dans l'URL (une data URI) pour que l'exemple fonctionne hors ligne. Sur un vrai site, src est le chemin d'un fichier :
src | Charge |
|---|---|
photo.jpg | photo.jpg dans le même dossier que le fichier HTML |
images/photo.jpg | Depuis le dossier images à côté du fichier HTML |
../photo.jpg | Depuis un dossier plus haut |
/images/photo.jpg | Depuis le dossier images à la racine du site |
https://example.com/photo.jpg | Depuis un autre site (elle peut être déplacée ou disparaître) |
Les chemins sont sensibles à la casse sur la plupart des serveurs web : Photo.JPG et photo.jpg sont des fichiers différents.
Le texte alternatif
Le texte alt remplace l'image. Les lecteurs d'écran le lisent à voix haute, et le navigateur l'affiche quand l'image ne peut pas se charger. Les deux images ci-dessous pointent vers des fichiers qui n'existent pas :
La première affiche son texte alternatif, « Coddy logo », à la place de l'image. La seconde a un alt vide : il n'y a donc aucun texte à afficher, et les lecteurs d'écran l'ignorent. Comment écrire alt :
- Décrivez ce qui compte dans le contexte. « Graphique en barres : les ventes ont doublé de mars à juin » en dit plus que « graphique ».
- Ne commencez pas par « Image de ». Les lecteurs d'écran l'annoncent déjà comme une image.
- Utilisez
alt=""pour la décoration (un séparateur, un ornement de fond) pour que les lecteurs d'écran l'ignorent. - N'omettez jamais
alt. Sans lui, certains lecteurs d'écran lisent à la place le nom du fichier, comme « IMG tiret bas 4032 point jpg ». - Pour une image dans un lien, décrivez la destination :
<a href="/"><img src="logo.svg" alt="Home"></a>.
Régler la taille de l'image
Les attributs width et height sont en pixels, sans unité. Les tailles CSS les remplacent. Le CSS le plus utile pour les images est cette paire, qui laisse une image se réduire avec son conteneur sans jamais s'étirer au-delà de sa largeur naturelle :
La première image garde ses 300 pixels et déborde de la boîte de 180 pixels. La seconde se réduit à 180 sur 120, en gardant ses proportions 3:2. height: auto compte : sans lui, l'attribut height="200" garderait l'image haute de 200 pixels et l'écraserait.
Écrivez toujours width et height dans le HTML, même pour les images responsives. Le navigateur s'en sert pour réserver la bonne place avant l'arrivée du fichier, donc le texte en dessous ne saute pas quand l'image se charge.
Recadrer avec object-fit
Quand une image doit remplir une boîte d'une autre forme (un avatar carré à partir d'une photo large, des cartes de même hauteur), object-fit décide de ce qui arrive au surplus :
La source est une image 2:1 d'un cercle, affichée dans des boîtes carrées :
fill(par défaut) étire l'image à la taille de la boîte, donc le cercle devient un ovale.containfait tenir toute l'image dedans, en laissant des bandes vides.coverremplit la boîte et rogne le surplus, en gardant le cercle rond. C'est le choix habituel pour les vignettes et les avatars.
object-position choisit la partie qui reste visible lors du recadrage, par exemple object-position: top pour les portraits.
Légendes avec figure et figcaption
Une légende qui appartient à une image va dans <figcaption>, et les deux vont dans <figure>. Cela les lie pour les lecteurs d'écran, et la figure peut être stylisée comme une seule unité :
La légende ne remplace pas alt. alt dit ce que montre l'image ; la légende ajoute ce dont un lecteur voyant aurait aussi besoin.
L'espace sous une image
Une image repose sur la ligne de base du texte, comme une lettre, donc son conteneur laisse de la place en dessous pour les jambages de lettres comme g et y. Une bordure rend l'espace visible :
La première bordure a une bande blanche sous l'image bleue. display: block sur l'image (deuxième boîte) la supprime ; vertical-align: middle aussi, si l'image doit rester inline.
Chargement différé et sources responsives
Pour les images plus bas dans une longue page, loading="lazy" retarde le téléchargement jusqu'à ce que le lecteur s'en approche en défilant :
<img src="gallery-7.jpg" alt="Harbor at dusk" width="800" height="533" loading="lazy">
Ne différez pas le chargement de l'image principale en haut de la page ; cela retarde la partie de la page que les lecteurs voient en premier.
Pour envoyer des fichiers plus légers aux petits écrans, listez plusieurs tailles dans srcset et indiquez au navigateur la largeur d'affichage de l'image avec sizes. Le navigateur choisit le fichier :
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 600px"
alt="Harbor at dusk" width="800" height="533">
<picture> va plus loin et propose différents formats, avec l'<img> comme solution de repli qui porte aussi le alt :
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Harbor at dusk" width="800" height="533">
</picture>
Formats d'image
| Format | Adapté à |
|---|---|
| JPEG | Photos |
| PNG | Captures d'écran, images qui demandent des bords nets ou de la transparence |
| WebP | Photos et graphismes, plus légers que JPEG et PNG, avec transparence |
| AVIF | Photos, généralement plus légères qu'en WebP |
| SVG | Logos, icônes et schémas ; s'adapte à toutes les tailles sans flou |
| GIF | Courtes animations, même si une <video> muette en boucle est bien plus légère |
Erreurs fréquentes
- Un chemin de votre propre ordinateur, comme
src="C:\Users\me\photo.jpg". Il ne marche que sur votre machine. Placez le fichier à côté de votre HTML et utilisez un chemin relatif. - Un
altmanquant. Chaque<img>en a besoin, vide pour la décoration. - Définir
widthetheighten CSS avec des valeurs d'une autre proportion. L'image s'étire. Définissez-en une et laissez l'autre àauto, ou utilisezobject-fit. - Pas d'attributs
widthetheight, donc la page saute pendant le chargement des images. - D'énormes fichiers réduits en CSS. Une photo de 4000 pixels affichée à 400 pixels est quand même téléchargée en entier. Redimensionnez-la, ou utilisez
srcset. - Une balise fermante
</img>.<img>est vide ; il n'y a rien à fermer.
Les images des exemples ci-dessus sont de petits SVG intégrés. Pour essayer le même code avec vos propres photos, collez-le dans le bac à sable HTML.
Questions fréquentes
Comment insérer une image en HTML ?
Utilisez la balise <img> avec le fichier dans src et une description dans alt : <img src="photo.jpg" alt="A red bicycle" width="600" height="400">. <img> n'a pas de balise fermante.
Comment changer la taille d'une image en HTML ?
Définissez les attributs width et height en pixels, ou utilisez du CSS comme img { width: 300px; height: auto; }. Ne définir qu'une dimension en laissant l'autre à auto conserve les proportions.
Pourquoi mon image ne s'affiche pas en HTML ?
Le plus souvent, le chemin src est faux : il est relatif au fichier HTML, les noms de fichiers sont sensibles à la casse sur la plupart des serveurs, et un chemin comme C:\photos\cat.jpg n'existe que sur votre ordinateur. Ouvrez directement l'URL de l'image dans le navigateur pour la vérifier.
Qu'est-ce que le texte alternatif en HTML ?
L'attribut alt est un texte de remplacement de l'image. Les lecteurs d'écran le lisent, et les navigateurs l'affichent quand l'image ne se charge pas. Décrivez ce que l'image montre ou ce à quoi elle sert ; utilisez alt="" pour les images purement décoratives.
Comment rendre une image responsive ?
Ajoutez-lui max-width: 100%; height: auto; en CSS. L'image se réduit alors pour tenir dans un conteneur étroit et ne dépasse jamais sa largeur naturelle.
Pourquoi y a-t-il un espace sous mon image ?
Les images sont inline par défaut et reposent sur la ligne de base du texte, ce qui laisse de la place en dessous pour les jambages des lettres. Mettez display: block sur l'image, ou vertical-align: middle, pour supprimer l'espace.
