0Pricing
HTML Academy · Leçon

L’élément img : src, alt, width et height

Intégrez correctement des images avec tous les attributs requis.

L’élément img : src, alt, width et height est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.

L’élément img

L’élément <img> intègre une image dans la page :

<img src="photo.jpg" alt="A golden retriever playing fetch">
<!-- img is a void element — no closing tag needed -->
<!-- src: path to the image file -->
<!-- alt: text description for screen readers and broken images -->

L’attribut src

L’attribut src indique la source de l’image :

<!-- Relative path -->
<img src="images/logo.png" alt="Company logo">

<!-- Root-relative path -->
<img src="/assets/banner.jpg" alt="Sale banner">

<!-- Absolute URL (external) -->
<img src="https://cdn.example.com/photo.jpg" alt="Mountain view">

<!-- Data URI (inline) -->
<img src="data:image/png;base64,iVBOR..." alt="Icon">

L’attribut alt

L’attribut alt fournit un texte de remplacement pour les images :

  • Il s’affiche lorsque l’image ne se charge pas
  • Il est lu à voix haute par les lecteurs d’écran
  • Il est indexé par les moteurs de recherche
  • Il est requis pour l’accessibilité (WCAG)

Rédiger un bon texte alt

Comment rédiger un texte alt efficace :

<!-- Informative image: describe the content -->
<img src="chart.png" alt="Bar chart showing 30% revenue growth Q1-Q4 2024">

<!-- Decorative image: empty alt -->
<img src="divider.png" alt="">
<!-- Empty alt tells screen readers to skip this image -->

<!-- Functional image (button/link): describe the action -->
<a href="/">
  <img src="logo.png" alt="Go to homepage">
</a>

Attributs de largeur et de hauteur

Indiquez toujours width et height pour les images :

<img src="photo.jpg" alt="Landscape" width="800" height="600">
<!-- Values are in pixels (no units needed) -->
<!-- Why? The browser can reserve space before the image loads
     This prevents layout shift (CLS) — a Core Web Vital metric -->

Ratio d’aspect et CSS

Définir la largeur et la hauteur en HTML permet à CSS de calculer le ratio d’aspect :

<!-- HTML sets intrinsic dimensions -->
<img src="photo.jpg" alt="Photo" width="1600" height="900">

<!-- CSS can make it responsive while preserving ratio -->
<!--
img {
  width: 100%;
  height: auto;  /* auto preserves the aspect ratio -->
}
-->

Formats d’image sur le Web

Formats d’image courants et cas d’utilisation :

  • JPEG/JPG — photos et images complexes comportant beaucoup de couleurs
  • PNG — images nécessitant de la transparence
  • WebP — format moderne : plus petit que JPEG/PNG et compatible avec la transparence
  • AVIF — format de nouvelle génération : compression encore meilleure que WebP
  • SVG — icônes et illustrations (vectorielles, redimensionnables à l’infini)
  • GIF — animations simples, en grande partie remplacées par la vidéo

Attribut loading

Contrôlez le moment du chargement des images avec l’attribut loading :

<!-- Lazy load: only load when near viewport -->
<img src="photo.jpg" alt="" loading="lazy" width="800" height="600">

<!-- Eager load (default): load immediately -->
<img src="hero.jpg" alt="" loading="eager" width="1920" height="1080">

<!-- Always eager-load above-the-fold images -->
<!-- Lazy-load everything below the fold -->

Attribut decoding

L’attribut decoding contrôle le comportement de décodage des images :

<img src="large.jpg" alt="" decoding="async" width="800" height="600">
<!-- async: decode in parallel with rendering (good for most images) -->
<!-- sync: decode before rendering (for critical above-fold images) -->
<!-- auto: browser decides (default) -->

Attribut fetchpriority

L’attribut fetchpriority indique la priorité de chargement de l’image :

<!-- Hero image: fetch with high priority -->
<img src="hero.jpg" alt="Hero" fetchpriority="high" width="1920" height="600">

<!-- Below-fold images: low priority -->
<img src="gallery-item.jpg" alt="" fetchpriority="low"
     loading="lazy" width="400" height="300">

Exemple complet avec img

Une image entièrement accessible et optimisée pour les performances :

<img
  src="/images/team-photo.jpg"
  alt="The Coddy team gathered at a conference table in 2024"
  width="1200"
  height="800"
  loading="lazy"
  decoding="async"
>

Vérification rapide

Pourquoi faut-il toujours inclure les attributs width et height dans les éléments img ?

Récapitulatif : élément img

Principes essentiels de l’intégration d’images :

  • src — URL de l’image, relative ou absolue
  • alt — description requise ; laissez-la vide pour les images décoratives
  • width et height — définissez-les toujours pour éviter les décalages de mise en page
  • loading="lazy" pour les images situées sous la ligne de flottaison
  • Choisissez le format approprié : WebP/AVIF pour les photos, SVG pour les icônes

Questions Fréquemment Posées

La leçon « L’élément img : src, alt, width et height » est-elle gratuite ?

Oui — le texte complet de « L’élément img : src, alt, width et height » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « L’élément img : src, alt, width et height » ?

Intégrez correctement des images avec tous les attributs requis. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer HTML Academy ?

Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « L’élément img : src, alt, width et height » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?

Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. L’élément img : src, alt, width et height
  2. Images adaptatives avec srcset et sizes
  3. L’élément picture pour la direction artistique
  4. figure et figcaption
← Retour à HTML Academy