Aller au contenu principal

Module HTML.5 – Images & médias

Objectif​

Maîtriser l'intégration d'images (<img>), comprendre les formats d'images, créer des images responsive, et intégrer vidéo/audio pour un contenu multimédia professionnel.

Théorie​

Balise <img>​

Syntaxe de base :

<img src="image.jpg" alt="Description de l'image">

Attributs essentiels :

  • src : Chemin vers l'image (obligatoire)
  • alt : Texte alternatif (obligatoire pour l'accessibilité)

Attribut alt (obligatoire)​

Rôle :

  • Accessibilité (screen readers)
  • Affichage si l'image ne charge pas
  • SEO (moteurs de recherche)

Bonnes pratiques :

<!-- ✅ Bon : descriptif -->
<img src="chat.jpg" alt="Chat roux assis sur un canapé">

<!-- ❌ Mauvais : vide ou générique -->
<img src="chat.jpg" alt="">
<img src="chat.jpg" alt="image">
<img src="chat.jpg" alt="chat.jpg">

Règles :

  • Décrire ce que l'image montre
  • Être concis (100-125 caractères max)
  • Si décorative : alt="" (mais préférer CSS)

Formats d'images​

JPEG (.jpg, .jpeg) :

  • Photos, images complexes
  • Compression avec perte
  • Pas de transparence

PNG (.png) :

  • Images avec transparence
  • Graphiques, logos
  • Compression sans perte (plus lourd)

GIF (.gif) :

  • Animations simples
  • Transparence (1 bit)
  • Limité à 256 couleurs

WebP (.webp) :

  • Format moderne (Google)
  • Meilleure compression que JPEG/PNG
  • Support transparence
  • Support limité (fallback nécessaire)

SVG (.svg) :

  • Vectoriel (scalable)
  • Léger pour les icônes/logos
  • Modifiable avec CSS/JS

Images responsive​

srcset et sizes​

srcset : Plusieurs sources selon la résolution

<img src="image-small.jpg"
     srcset="image-small.jpg 300w,
             image-medium.jpg 600w,
             image-large.jpg 1200w"
     sizes="(max-width: 600px) 300px,
            (max-width: 1200px) 600px,
            1200px"
     alt="Description">

sizes : Taille d'affichage selon le viewport

<picture> : Contrôle total​

<picture>
    <source media="(min-width: 1200px)" srcset="image-large.jpg">
    <source media="(min-width: 600px)" srcset="image-medium.jpg">
    <img src="image-small.jpg" alt="Description">
</picture>

Avantages :

  • Art direction (images différentes selon l'écran)
  • Formats modernes avec fallback
<picture>
    <source type="image/webp" srcset="image.webp">
    <source type="image/jpeg" srcset="image.jpg">
    <img src="image.jpg" alt="Description">
</picture>

Attributs importants​

width et height​

<img src="image.jpg" alt="Description" width="800" height="600">

Avantages :

  • Réserve l'espace (évite le layout shift)
  • Performance (CLS - Cumulative Layout Shift)

loading​

<img src="image.jpg" alt="Description" loading="lazy">

Valeurs :

  • lazy : Chargement différé (images hors viewport)
  • eager : Chargement immédiat (défaut)

decoding​

<img src="image.jpg" alt="Description" decoding="async">

Valeurs :

  • async : Décodage asynchrone
  • sync : Décodage synchrone
  • auto : Défaut (navigateur décide)

Vidéo : <video>​

Syntaxe de base :

<video src="video.mp4" controls>
    Votre navigateur ne supporte pas la vidéo.
</video>

Attributs :

<video src="video.mp4"
       controls
       autoplay
       loop
       muted
       poster="thumbnail.jpg"
       width="800"
       height="600">
    Votre navigateur ne supporte pas la vidéo.
</video>

Plusieurs formats (fallback) :

<video controls>
    <source src="video.webm" type="video/webm">
    <source src="video.mp4" type="video/mp4">
    Votre navigateur ne supporte pas la vidéo.
</video>

Bonnes pratiques :

  • Toujours inclure controls
  • Fournir plusieurs formats
  • Texte de fallback
  • poster pour la miniature

Audio : <audio>​

Syntaxe :

<audio src="audio.mp3" controls>
    Votre navigateur ne supporte pas l'audio.
</audio>

Plusieurs formats :

<audio controls>
    <source src="audio.ogg" type="audio/ogg">
    <source src="audio.mp3" type="audio/mpeg">
    Votre navigateur ne supporte pas l'audio.
</audio>

Figure et Figcaption​

<figure> : Conteneur pour média avec légende

<figure>
    <img src="image.jpg" alt="Description">
    <figcaption>Légende de l'image</figcaption>
</figure>

Avantages :

  • Sémantique (légende associée)
  • Accessibilité
  • SEO

Exercices guidés​

Exercice 1 : Image de base​

Créez une page avec :

  • Une image avec src et alt descriptif
  • Testez avec alt vide (image décorative)
  • Testez avec image manquante (vérifiez l'affichage de alt)

Exercice 2 : Formats d'images​

Créez des images dans différents formats :

  • JPEG pour une photo
  • PNG pour un logo avec transparence
  • SVG pour une icône

Exercice 3 : Images responsive​

Créez une image responsive avec :

  • srcset avec 3 tailles
  • sizes selon le viewport
  • Testez sur différentes tailles d'écran

Exercice 4 : Picture element​

Créez un <picture> avec :

  • Format WebP avec fallback JPEG
  • Différentes images selon la taille d'écran

Exercice 5 : Vidéo et audio​

Créez :

  • Une vidéo avec contrôles et poster
  • Un audio avec contrôles
  • Utilisez <figure> pour la vidéo avec légende

❌ Erreurs fréquentes​

Erreur 1 : Oublier l'attribut alt​

❌ Mauvais :

<img src="image.jpg">

✅ Bon :

<img src="image.jpg" alt="Description">

Pourquoi : Obligatoire pour l'accessibilité.

Erreur 2 : Alt non descriptif​

❌ Mauvais :

<img src="chat.jpg" alt="image">

✅ Bon :

<img src="chat.jpg" alt="Chat roux assis sur un canapé">

Pourquoi : Le alt doit décrire l'image pour les screen readers.

Erreur 3 : Images non optimisées​

❌ Mauvais :

<img src="photo-10mb.jpg" alt="Photo">

✅ Bon :

<img src="photo-optimized-200kb.jpg" alt="Photo">

Pourquoi : Performance (temps de chargement).

Erreur 4 : Pas de width/height​

❌ Mauvais :

<img src="image.jpg" alt="Description">

✅ Bon :

<img src="image.jpg" alt="Description" width="800" height="600">

Pourquoi : Évite le layout shift (CLS).

Erreur 5 : Vidéo sans fallback​

❌ Mauvais :

<video src="video.mp4" controls></video>

✅ Bon :

<video controls>
    <source src="video.webm" type="video/webm">
    <source src="video.mp4" type="video/mp4">
    Votre navigateur ne supporte pas la vidéo.
</video>

Pourquoi : Compatibilité navigateurs.

🚀 Mini-projet​

Mission : Créer une galerie d'images responsive

Créez une page gallery.html avec :

Contenu :

  1. 6 images avec alt descriptifs
  2. Images responsive avec srcset et sizes
  3. Utilisation de <figure> et <figcaption> pour chaque image
  4. Une vidéo avec contrôles et poster
  5. Un audio avec contrôles

Optimisations :

  • Images optimisées (formats appropriés)
  • width et height sur les images
  • loading="lazy" pour les images hors viewport
  • Formats multiples pour vidéo/audio

Critères :

  • ✅ Toutes les images ont un alt descriptif
  • ✅ Images responsive (srcset/sizes)
  • ✅ Utilisation de figure/figcaption
  • ✅ Vidéo et audio avec fallback
  • ✅ Performance optimisée

Objectif : Maîtriser l'intégration d'images et médias de manière professionnelle.

Validation : Vous pouvez passer au module suivant quand vous maîtrisez les images, vidéos, audio et avez créé une galerie responsive optimisée.