Insérer une image en HTML

Par Sam Accolade · Publié le 3 novembre 2017 · Mis à jour le 11 août 2026

Insérer une image dans une page web tient en une seule ligne de HTML. Pourtant, c'est l'un des sujets où j'ai accumulé le plus de mauvaises habitudes au début de ma reconversion, en 2017 : textes alternatifs vides, fichiers beaucoup trop lourds, mises en page qui sautaient pendant le chargement. Dans cet article, je reprends la balise img avec les pratiques actuelles : un alt descriptif, les attributs width et height, le chargement différé, les formats modernes WebP et AVIF, et une première approche de srcset. Tous les comportements décrits ici ont été mesurés dans Chrome pendant la rédaction.

Si vous découvrez tout juste le HTML, je vous conseille de lire d'abord les bases pour bien débuter en HTML : la suite suppose que vous savez écrire une page simple.

La balise img : src et alt

La balise <img> est une balise orpheline : elle ne se ferme pas. Elle porte deux attributs indispensables :

• src : le chemin du fichier image, absolu ou relatif, construit exactement de la même façon que pour les liens ;
• alt : le texte alternatif, qui décrit ce que montre l'image.

<img src="images/chaton-roux.jpg" alt="Chaton roux endormi dans un panier en osier" />

Un détail au passage : vous croiserez les deux écritures, <img ...> et <img ... /> avec une barre oblique finale. Cette barre est facultative en HTML, le navigateur l'ignore ; les deux formes sont correctes et de nombreux outils de formatage ajoutent la barre automatiquement.

Un alt descriptif est obligatoire

Le texte alternatif n'est pas une formalité. Il est lu à voix haute par les lecteurs d'écran des personnes malvoyantes, il s'affiche à la place de l'image si le fichier ne se charge pas, et il aide les moteurs de recherche à comprendre le contenu de l'image. La règle que je m'impose : décrire ce que l'on verrait si l'image était remplacée par une phrase.

• À éviter : alt="image1", alt="photo", ou un empilement de mots-clés.
• Correct : alt="Vue du port de Cherbourg au coucher du soleil".
• Cas particulier : une image purement décorative, qui n'apporte aucune information, prend un alt vide, alt="". L'attribut reste présent, mais les lecteurs d'écran ignorent alors l'image au lieu de lire son nom de fichier.

Côté nommage, gardez des fichiers sans espace ni accent (chaton-roux.jpg plutôt que Photo Chaton n°1.jpg) : vous éviterez les chemins cassés et les URL illisibles.

width et height : éviter les décalages de mise en page

Tant que l'image n'est pas téléchargée, le navigateur ne connaît pas ses dimensions. Sans indication, il lui réserve une hauteur quasi nulle, puis pousse brutalement tout le contenu vers le bas quand le fichier arrive. C'est ce que l'on appelle un décalage de mise en page (layout shift) : le texte que vous étiez en train de lire saute d'un coup.

La parade est simple : indiquer les dimensions réelles du fichier dans les attributs width et height, en pixels, sans unité.

<img src="images/plage.jpg" alt="Plage de sable à marée basse" width="1200" height="675" />

Ces attributs ne figent pas la taille d'affichage. Avec la règle CSS habituelle ci-dessous, l'image reste fluide : le navigateur se sert du couple width/height uniquement pour calculer le ratio et réserver la place.

img {
  max-width: 100%;
  height: auto;
}

J'ai vérifié ce comportement pendant la rédaction, dans une page de test Chrome où le téléchargement des images ne se terminait jamais, dans un conteneur de 600 px. L'image déclarée width="1200" height="675" occupait déjà un bloc de 600 × 338 px avant même de se charger : les styles calculés montraient aspect-ratio: auto 1200 / 675, le ratio déduit des attributs. La même image sans attributs ne mesurait que 18 px de haut ; à l'arrivée du fichier, elle aurait poussé tout le contenu suivant vers le bas.

loading="lazy" : différer le chargement des images hors écran

Par défaut, le navigateur télécharge toutes les images de la page dès son ouverture, y compris celles situées tout en bas, que le visiteur ne verra peut-être jamais. L'attribut loading="lazy" demande au navigateur d'attendre que l'image approche de la zone visible avant de la télécharger.

<img src="images/plage.jpg" alt="Plage de sable à marée basse" width="1200" height="675" loading="lazy" />

Là encore, j'ai mesuré le comportement dans Chrome pendant la rédaction : sur une page de test contenant une image en haut et une image loading="lazy" placée 4 000 px plus bas, seule l'image du haut était téléchargée à l'ouverture. La requête vers la seconde image n'est partie qu'au moment du défilement vers le bas de page.

Deux réflexes à associer à cet attribut : ne pas l'appliquer aux images visibles dès l'ouverture de la page (l'image principale d'un article, par exemple, doit se charger immédiatement), et toujours le combiner avec width et height, sans quoi le décalage de mise en page décrit plus haut se produit au moment du défilement.

Les formats : WebP et AVIF ont pris le relais

Historiquement, on choisissait entre trois formats : le JPEG pour les photos, le PNG pour les graphiques et la transparence, le GIF pour les petites animations. Ces formats fonctionnent toujours, mais deux formats plus récents font aujourd'hui mieux sur tous ces terrains :

• WebP : à qualité visuelle comparable, les fichiers sont en général plus légers qu'en JPEG ou en PNG ; le format gère la transparence et l'animation. Il est pris en charge par tous les navigateurs majeurs actuels.
• AVIF : plus récent, il compresse encore mieux que WebP dans la plupart des cas, au prix d'un encodage plus lent au moment de préparer les fichiers. Il est lui aussi largement pris en charge par les navigateurs actuels.

Mention à part pour le SVG, un format vectoriel : idéal pour les logos, icônes et schémas, il reste net à n'importe quelle taille. Les schémas de ce blog sont d'ailleurs des SVG.

Pour servir un format moderne tout en gardant un filet de sécurité pour les très vieux navigateurs, on enveloppe l'image dans une balise <picture> : le navigateur lit les balises <source> dans l'ordre et retient la première dont il connaît le type.

<picture>
  <source srcset="images/plage.avif" type="image/avif" />
  <source srcset="images/plage.webp" type="image/webp" />
  <img src="images/plage.jpg" alt="Plage de sable à marée basse" width="1200" height="675" loading="lazy" />
</picture>

Comportement vérifié dans Chrome pendant la rédaction : sur un montage <picture> proposant une source WebP et un repli PNG, la propriété currentSrc de l'image pointait bien vers le fichier WebP. Le navigateur choisit la source à partir de l'attribut type, sans télécharger les autres. Notez que les attributs alt, width, height et loading restent sur la balise img intérieure.

srcset et sizes : servir la bonne taille d'image

Un écran de téléphone de 390 px de large n'a pas besoin d'une image de 1 920 px. L'attribut srcset permet de proposer la même image en plusieurs largeurs, et l'attribut sizes indique quelle place l'image occupera à l'écran ; le navigateur choisit ensuite seul le fichier le plus adapté.

<img
  src="images/plage-960.jpg"
  srcset="images/plage-480.jpg 480w, images/plage-960.jpg 960w, images/plage-1920.jpg 1920w"
  sizes="100vw"
  width="960"
  height="540"
  alt="Plage de sable à marée basse"
/>

Le suffixe 480w annonce la largeur réelle du fichier en pixels, et sizes="100vw" signifie « cette image occupe toute la largeur de la fenêtre ». Mesure faite dans Chrome pendant la rédaction : avec ce code, une fenêtre de 390 px de large charge plage-480.jpg, et la même page ouverte dans une fenêtre de 1 400 px charge plage-1920.jpg. Le visiteur mobile ne télécharge donc jamais le grand fichier.

C'est volontairement une introduction : sizes peut décrire des mises en page plus fines (une image qui occupe la moitié de l'écran sur grand écran, par exemple), et les écrans haute densité entrent aussi en jeu. Retenez pour l'instant le principe : plusieurs fichiers, le navigateur choisit. Vous pourrez approfondir quand vous serez à l'aise avec les dimensions en CSS.

figure et figcaption : légender une image

Quand une image illustre réellement le propos (un schéma, une capture, un graphique), placez-la dans un élément <figure>, accompagnée d'une légende dans <figcaption>. Visuellement, peu de différence ; sémantiquement, vous indiquez au navigateur et aux moteurs de recherche que l'image et sa légende forment un tout, au même titre que les balises d'architecture structurent le reste de la page.

<figure>
  <img src="images/schema-boite.png" alt="Schéma du modèle de boîte CSS" width="800" height="500" loading="lazy" />
  <figcaption>Le modèle de boîte : contenu, padding, bordure et marge.</figcaption>
</figure>

Une image purement décorative, elle, n'a pas besoin de figure : elle se place directement dans le flux du texte, avec son alt="".

Les erreurs à éviter

• Un alt absent, vide sur une image informative, ou générique (« image », « photo »).
• Publier la photo brute d'un appareil ou d'un téléphone sans la redimensionner : plusieurs milliers de pixels de large pour un emplacement qui en affiche quelques centaines.
• Oublier width et height : la mise en page saute pendant le chargement, comme mesuré plus haut.
• Mettre loading="lazy" sur l'image principale visible dès l'ouverture : elle se chargerait plus tard que nécessaire.
• Des noms de fichiers avec espaces, accents ou majuscules aléatoires.

Conclusion

Une image bien insérée, c'est une balise img avec un alt qui décrit le contenu, des attributs width et height pour réserver l'espace, loading="lazy" sous la ligne de flottaison, un format moderne servi via picture, et srcset quand la page vise aussi bien mobile que grand écran. Rien d'insurmontable : chaque point tient en un attribut. La prochaine étape logique est de mettre en forme tout cela, et ça tombe bien : c'est l'objet de l'article donner du style à une page grâce au CSS.