Retour au cours

Leçon 13 : Insertion d'images (`<img>`)

La Masterclass HTML : De Zéro à Développeur Web

13. Insertion d'images (<img>)

Les images sont insérées à l'aide de la balise auto-fermante <img>. Elle nécessite deux attributs obligatoires.

13.1 Attributs obligatoires

  1. src (Source) : Spécifie le chemin (absolu ou relatif) vers le fichier image.
  2. alt (Texte alternatif) : Fournit une description textuelle de l'image. C'est vital pour l'accessibilité (lecteurs d'écran) et le SEO, et cela apparaît si l'image ne parvient pas à se charger.

html <img src="images/photo-entete.jpg" alt="Un grand groupe de personnes collaborant sur un projet informatique.">

13.2 Définition de la taille

Bien que vous utilisiez principalement le CSS pour contrôler la taille des images, vous pouvez définir les dimensions par défaut à l'aide des attributs width (largeur) et height (hauteur) (en pixels, sans l'unité px).

html <img src="logo.png" alt="Logo de l'entreprise" width="150" height="50">

Meilleure pratique : Définissez toujours width et height pour des raisons de performance. Cela permet au navigateur de réserver l'espace avant le chargement de l'image, évitant ainsi les décalages de mise en page.