Images HTML
Apprenez à intégrer des images avec la balise img HTML : src et alt, largeur/hauteur pour éviter le décalage de mise en page, srcset et picture adaptatifs, et chargement différé.
Pour intégrer une image dans une page web, utilisez la balise <img>.
La balise <img> prend en charge plusieurs attributs obligatoires et optionnels, qui fournissent des informations supplémentaires sur l'image.
Syntaxe
La balise <img> est vide, ce qui signifie que la balise de fermeture n'est pas requise. Elle contient uniquement des attributs. Mais en XHTML, la balise (<img>) doit être fermée (<img/>).
Attributs d'image obligatoires - src et alt
L'attribut src (source) spécifie le nom ou l'emplacement de l'image à afficher. Sa valeur peut être un chemin relatif (un fichier dans votre propre projet) ou une URL absolue (une image hébergée ailleurs).
Chemin relatif — l'image se trouve dans votre projet, à côté du fichier HTML :
<img src="images/example.jpg" alt="A description of the image" />URL absolue — l'image est hébergée sur un autre serveur :
<img src="https://www.example.com/images/example.jpg" alt="A description of the image" />L'attribut alt fournit un texte alternatif affiché si l'image ne se charge pas (connexion lente, chemin incorrect) et lu à haute voix par les lecteurs d'écran. Il y a deux cas :
- Images significatives — donnez à
altune description courte et précise de ce que l'image représente (alt="Graphique en barres des ventes 2024"). - Images décoratives qui n'apportent rien au contenu — utilisez
alt=""vide. Les lecteurs d'écran ignorent alors l'image au lieu d'annoncer un nom de fichier sans sens.
Incluez toujours l'attribut. Omettre alt entièrement est différent de alt="" et est signalé comme une erreur d'accessibilité.
Remarque : le comportement de l'info-bulle au survol est contrôlé par l'attribut title, et non par alt.
La syntaxe de la balise <img> avec les attributs src et alt obligatoires ressemblera à ceci :
Exemple d'image HTML
<img src="example.jpg" alt="HTML tutorial" />Utilisez l'attribut alt pour toutes les images afin de fournir une description claire et concise du contenu de l'image, ce qui améliore l'accessibilité et aide les moteurs de recherche à comprendre votre page.
Attributs d'image recommandés - largeur et hauteur
Définissez toujours les attributs width et height sur un <img>. Ils indiquent au navigateur le rapport d'aspect de l'image avant que le fichier soit téléchargé, afin qu'il puisse réserver exactement le bon espace dans la mise en page dès le départ.
Sans eux, la page se recalcule au moment où chaque image arrive — le texte et les autres éléments se décalent pour faire de la place. Ce saut visuel est appelé Cumulative Layout Shift (CLS), l'un des Core Web Vitals de Google et une source fréquente de clics involontaires. Fournir les dimensions l'évite.
Exemple d'image HTML
<img src="https://www.example.com/images/example.jpg" alt="HTML tutorial" width="200" height="120" />Les attributs prennent des valeurs en pixels sans unité (width="200", et non width="200px"). Vous pouvez toujours redimensionner l'image avec CSS — le navigateur n'utilise les valeurs des attributs que pour calculer le rapport d'aspect et éviter le décalage de mise en page.
Exemple de la balise HTML <img> avec les attributs src, alt, width et height :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Place for your heading </h1>
<p>This is Aleq's photo</p>
<img src="https://api.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
</body>
</html>Résultat
Conservez les attributs width et height pour le rapport d'aspect, puis utilisez les propriétés CSS max-width ou max-height pour ajouter de la flexibilité. Cela évite que les grandes images débordent de la mise en page sur les petits écrans.
Rendre les images fluides (adaptatives)
Pour empêcher une image de déborder de son conteneur sur les écrans étroits, appliquez-lui cette règle CSS. C'est la ligne CSS la plus utile pour les images :
img {
max-width: 100%;
height: auto;
}max-width: 100% limite l'image rendue à la largeur de son conteneur, de sorte qu'elle se réduit sur les petits écrans mais ne s'agrandit jamais au-delà de sa taille naturelle au risque de devenir floue. height: auto laisse la hauteur suivre pour que l'image conserve ses proportions au lieu de s'étirer.
Cela fonctionne en tandem avec les attributs width/height : les attributs réservent l'espace du rapport d'aspect (sans CLS), tandis que le CSS rend la taille rendue réelle fluide.
Flottement d'image
Par défaut, un élément <img> est inline, il s'insère donc dans la ligne de texte. Vous pouvez envelopper du texte autour d'une image avec la propriété CSS float — définissez float: left ou float: right.
Float est une technique héritée pour ce type de mise en page. Pour tout ce qui va au-delà d'un simple encadrement d'un paragraphe par une image — galeries, médias côte à côte, cartes — préférez Flexbox ou CSS Grid. Ils vous offrent alignement, espaces et retour à la ligne sans les quirks de dégagement que float nécessite.
Pour afficher l'image à gauche et le texte à droite, ajoutez float: left. Préférez une classe CSS plutôt qu'un attribut style inline pour la maintenabilité.
Exemple de la balise <img> et de la propriété CSS float pour faire flotter une image à gauche :
Exemple d'une image avec float|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Place for your heading </h1>
<img src="https://api.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185" style="float:left"/>
<p>Aleq's photo</p>
</body>
</html>Ajouter l'attribut style="float:right" à la balise <img> positionne le texte à gauche et l'image à droite.
Exemple de la balise <img> et de la propriété CSS float pour faire flotter une image à droite :
Exemple avec un attribut float:right|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Place for your heading </h1>
<img src="https://api.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185" style="float:right"/>
<p>Aleq's photo</p>
</body>
</html>Résultat
Comment ajouter un lien hypertexte à une image
Comme la balise <a> est utilisée pour insérer des liens hypertextes, il suffit de placer l'image dans la balise <a> pour rendre votre image cliquable.
Exemple des balises <a> et <img> pour ajouter un lien hypertexte à une image :
Exemple d'une image avec un lien hypertexte
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<a href="https://www.w3docs.com/" aria-label="w3docs homepage">
<img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="logo"/>
</a>
</body>
</html>Images adaptatives : servir le bon fichier
Une seule image convient rarement à tous les écrans. Envoyer une photo de 2000px à un téléphone gaspille de la bande passante ; envoyer une petite image à un écran 4K semble flou. HTML vous offre deux outils pour laisser le navigateur choisir le meilleur fichier pour chaque appareil.
srcset et sizes (même image, tailles différentes)
Utilisez les attributs srcset et sizes sur <img> lorsque vous avez la même image à plusieurs largeurs et souhaitez que le navigateur télécharge la plus appropriée.
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 50vw"
width="800"
height="600"
alt="A scenic mountain lake"
/>srcsetliste les fichiers candidats avec leurs largeurs intrinsèques (400wsignifie que le fichier fait 400px de large).sizesindique au navigateur la largeur d'affichage de l'image — ici, toute la largeur du viewport en dessous de 600px, sinon la moitié. Le navigateur combine cela avec la densité de pixels de l'appareil pour choisir le fichier le plus petit qui reste net.srcreste comme solution de repli pour les très anciens navigateurs.
L'élément picture (formats différents ou direction artistique)
L'élément <picture> encapsule plusieurs éléments <source> et un <img>. Le navigateur parcourt les sources de haut en bas et utilise la première qu'il prend en charge, se rabattant sur le <img> si aucune ne correspond.
L'utilisation classique consiste à servir un format moderne et plus léger avec un repli garanti :
<picture>
<source srcset="photo.avif" type="image/avif" />
<source srcset="photo.webp" type="image/webp" />
<img src="photo.jpg" alt="A scenic mountain lake" width="800" height="600" />
</picture>Un navigateur qui comprend AVIF télécharge le fichier AVIF ; celui qui ne comprend que WebP l'utilise ; tout le reste se rabat sur le JPEG. Le <img> est obligatoire — il fournit le texte alt et le repli. Vous pouvez également utiliser <picture> pour la direction artistique : afficher une image recadrée en portrait sur les téléphones et une image large sur les ordinateurs de bureau via des attributs media sur chaque <source>.
Chargement différé et décodage
Par défaut, le navigateur télécharge eagrement toutes les images de la page. Pour les images loin en dessous de la ligne de flottaison, c'est un effort inutile en amont. Ajoutez loading="lazy" pour que le navigateur ne récupère l'image qu'à l'approche du viewport :
<img src="photo.jpg" alt="A scenic mountain lake" width="800" height="600" loading="lazy" />Utilisez loading="lazy" pour les images hors écran, mais pas pour votre plus grande image au-dessus de la ligne de flottaison (comme un hero ou un élément LCP) — différer celle-là ralentit le chargement perçu.
Vous pouvez également ajouter decoding="async", ce qui permet au navigateur de décoder l'image hors du fil principal afin de ne pas bloquer le rendu du contenu environnant.
Quel format d'image choisir pour le web
Il existe trois principaux types de formats d'image pris en charge par les navigateurs :
- GIF (Graphics Interchange Format)
- JPG / JPEG (Joint Photographic Experts Group)
- PNG (Portable Network Graphics)
Le GIF dispose de 256 couleurs uniques qui permettent des graphiques simples et à chargement rapide. Vous pouvez utiliser le GIF pour les petits dessins, diagrammes, graphiques, boutons et autres graphiques simples, qui n'empêcheront pas votre page de se charger rapidement.
Le JPEG est généralement un format 24 bits qui mélange la lumière rouge, bleue et verte pour afficher des millions de couleurs. Il est donc principalement utilisé pour les photographies. Ce format vous offre la flexibilité de choisir le niveau de compression de votre image — de 0 % (compression élevée) à 100 % (sans compression). Vous pouvez choisir ce format si vous acceptez de perdre un peu de qualité en échange d'une réduction de taille. Évitez d'utiliser JPEG pour les images avec du texte, des formes ou de grands blocs de couleur, car lorsque le fichier est compressé, les lignes se flouttent et les couleurs se décalent.
Le format PNG combine les avantages du JPEG et du GIF : il prend en charge des millions de couleurs et permet une compression sans perte. Vous pouvez utiliser le PNG pour les graphiques web nécessitant de la transparence, des graphiques riches en couleurs et des graphiques complexes ou des photographies.
Formats d'image modernes
Deux formats modernes sont désormais largement pris en charge par les navigateurs et produisent des fichiers plus petits et à chargement plus rapide que JPEG ou PNG.
WebP, conçu par Google, prend en charge la compression sans perte et avec pertes, ainsi que la transparence et l'animation. Les fichiers WebP sont généralement 25 à 35 % plus petits qu'un JPEG ou PNG équivalent et sont pris en charge par tous les grands navigateurs actuels. (WebP - Wikipedia)
AVIF est un format plus récent basé sur le codec vidéo AV1. Il compresse généralement encore mieux que WebP à la même qualité visuelle et prend en charge une large gamme de couleurs, ce qui le rend excellent pour les photographies. La prise en charge des navigateurs est maintenant large mais légèrement en retrait par rapport à WebP.
Comme tous les navigateurs de vos visiteurs ne prennent pas en charge le format le plus récent, servez-les avec un élément <picture> et un repli JPEG ou PNG, comme indiqué dans la section Images adaptatives ci-dessus. Le navigateur choisit alors le meilleur format qu'il comprend.
Vous pouvez encore rencontrer des formats plus anciens tels que BPG et HEIC d'Apple. Aucun des deux n'est pris en charge par les navigateurs web, évitez-les donc pour les images sur le web — convertissez-les en WebP ou AVIF à la place.