Insérer une image en html

Les formats d’image : lequel choisir ?

L’affichage d’images influe considérablement sur le poids d’une page, et donc son temps de chargement… Par exemple, une simple photo de 120 Ko correspond à 120 000 caractères, soit environ 24000 mots !…

Insérer une image : le droit chemin

L’attribut src au cœur de la balise img est obligatoire, : il indique le chemin vers l’image qu’on veut intégrer.

• Utilisez des noms de fichiers uniques et sans caractères spéciaux
• Veillez à ranger vos visuels au même endroit, au plus proche de votre fichier html

<!-- Si l'image est à la racine du fichier html -->
<img src="mon-image.jpg" alt="Une description pour l'accessibilité">

<!-- Si l'image est rangée dans un dossier -->
<img src="monDossier/mon-image.jpg" alt="Une description pour l'accessibilité">

<!-- Si l'image se trouve un cran en dessous du fichier html -->
<img src="../mon-image.jpg" alt="Une description pour l'accessibilité">

<!-- Si l'image est hébergée en ligne. -->
<img src="http://www.pop.fr/champagne.jpg" alt="Une description pour l'accessibilité"> 

Insérer une image rangée dans un sous-dossier

La syntaxe doit intégrer le nom du dossier avant le nom du fichier

<!-- Si l'image est à la racine du fichier html -->
<img src="nomDuFichier.jpg" >

<!-- Si l'image est rangée dans un dossier -->
<img src="nomDuDossier/nomDuFichier.jpg" >

Les attributs de la balise image

L’attribut alt pour l’accessibilité

L’attribut alt contient une description textuelle de l’image, ce qui est vivement conseillé pour améliorer l’accessibilité de votre site. Les utilisateurs de lecteur d’écran pourront entendre le texte contenu dans la balise alt lu à haute voix ou obtenir sa transcription en braille. Une image purement décorative doit tout de même avoir un alt mais vide (alt=""), pour que les lecteurs d’écran l’ignorent.

L’attribut title pour ajouter une info-bulle

Le contenu de l’attribut title s’affiche sous forme d’info-bulle après quelques secondes de survol de l’image. Pour l’ajouter, il suffit d’insérer cet attribut à l’intérieur de la balise img.

<!-- J'ajoute l'attribut à l'intérieur de ma balise img -->
<img src="chaton.jpg" alt="Photo d'un chaton roux endormi" title="ici, le contenu de mon info bulle">

Redimensionner son image avec width et height

Les attributs width et height permettent de définir les dimensions d’affichage de votre image, en pixels. Même si vous comptez gérer la taille en CSS, indiquer width et height directement dans le HTML est une bonne pratique : le navigateur réserve l’espace nécessaire avant le chargement de l’image, ce qui évite que la page “saute” pendant le chargement.

• Les valeurs sont en pixels, sans unité dans le HTML (width="600" et non width="600px")
• Si vous ne renseignez qu’un seul attribut (par ex. width), le navigateur calcule l’autre proportionnellement
• Pour un contrôle plus fin et centralisé, utilisez le CSS — mais gardez toujours les attributs HTML comme indication de dimensions

<img src="photo.jpg" alt="Un paysage" width="600" height="400">

/* En CSS, on peut ensuite ajuster avec souplesse */
img {
  max-width: 100%;
  height: auto;
}

Pour aller plus loin avec la balise image

Ajouter une légende à son image : la balise figcaption

Si votre image s’accompagne d’une légende, il est recommandé, pour améliorer la lisibilité et l’accessibilité de votre page d’enrober votre balise img dans une balise-mère figure. ET d’y ajouter, à la suite de la balise img, la balise figcaption.

<!-- Ma page affiche une image ET sa légende -->
<figure>
  <img src="mon-image.jpg" alt="une veilleuse licorne">
  <figcaption>Charmante veilleuse licorne et aussi légende associée au visuel</figcaption>
</figure>

Insérer une image intelligente : la balise picture

La balise picture permet de proposer plusieurs versions d’une même image (formats différents, tailles différentes) et de laisser le navigateur choisir la meilleure. Le navigateur lit les source de haut en bas et s’arrête au premier format qu’il supporte. S’il ne comprend aucun source, il utilise le img classique.

• Il s’agit d’une solution utile pour servir du WebP aux navigateurs modernes tout en gardant un JPG en solution de repli.
• La balise img reste obligatoire à l’intérieur, comme filet de sécurité.

<picture>
<source srcset="mon-image.avif" type="image/avif">
<source srcset="mon-image.webp" type="image/webp">
<img src="mon-image.jpg" alt="Description de l'image">
</picture>

L’optimisation des images, l’éco-index et la sobriété numérique

Au-delà de l’insertion d’image, il convient de de lfaire de façon responsable :

• Pensez à redimensionner vos visuels avant de les mettre en ligne : ne pas afficher une image de 4000 px dans un espace de 400 px
• Optez pour le bon format, misez sur le WebP/AVIF plus légers
• Gardez le poids comme réflexe : fixez une règle simple comme “aucune image au-dessus de 200 Ko sur une page web classique”.
• Des outils permettent de mesurer l’impact environnemental d’une page : les images sont presque toujours le premier levier d’amélioration…
• Soyez critiques et posez-vous la question “Cette image est-elle vraiment utile ?” Un carrousel de dix photos décoratives pèse lourd pour peu de valeur ajoutée