Image en HTML : Comment Insérer une Image avec la Balise ?

ecran-ordinateur-code-html-img

Vous voulez mettre une image sur votre page web mais vous ne savez pas comment faire ? C’est une étape de base mais essentielle.

Ce guide vous explique comment utiliser la balise HTML <img> et tous les attributs à connaître pour le faire correctement.

L’essentiel à retenir sur l’image en HTML :

  • La balise à utiliser est <img>, c’est un élément vide (pas de balise de fermeture).
  • L’attribut src est obligatoire : il indique le chemin vers votre fichier image.
  • L’attribut alt est essentiel pour l’accessibilité et le SEO, il décrit l’image.
  • Les attributs width et height sont cruciaux pour la performance de la page web.
  • Le format d’image WebP est le plus recommandé pour un bon équilibre entre qualité et poids du fichier.

La syntaxe de base pour insérer une image en HTML

Pour afficher une image sur une page web, tout part d’une seule balise HTML : la balise <img>. C’est une balise un peu spéciale.

Contrairement à un paragraphe <p>...</p>, la balise <img> n’a pas besoin de balise de fermeture. On l’appelle une balise « vide » ou « orpheline ». Elle fonctionne seule.

Le code minimal avec la balise ``

Le code le plus simple pour insérer une image ressemble à ça :

<img src="URL_de_l_image" alt="description_de_l_image">

Dans cet exemple, il y a deux attributs indispensables :

  • src : C’est la source (l’URL ou le chemin) de votre image.
  • alt : C’est le texte alternatif, une courte description de l’image.

Sans l’attribut src, le navigateur ne sait pas quelle image afficher. C’est donc le seul attribut réellement obligatoire pour que ça fonctionne.