frontend / html
Médias : vidéo, audio et images responsives
Explication
Ce que vous allez apprendre
- Servir plusieurs résolutions de la même image avec
srcset/sizes - Distinguer l'optimisation de bande passante de l'art direction avec
<picture> - Intégrer une vidéo avec plusieurs formats de repli et des sous-titres
<track> - Choisir la bonne valeur de
preloadpour éviter de gaspiller de la bande passante - Ajouter des formats d'image modernes (AVIF, WebP) avec repli automatique vers JPEG
Dans quel contexte ?
Le rapport Lighthouse de boutique.html alerte sur un poids d'images excessif : la même photo de 1600px de large, pensée pour un écran desktop, est envoyée telle quelle à tous les visiteurs mobiles. En remplaçant le simple <img src="produit.jpg"> par un srcset proposant plusieurs largeurs (400w, 800w, 1200w, 1600w) accompagné de sizes, le navigateur choisit lui-même la version adaptée à l'écran de chaque visiteur, réduisant nettement le temps de chargement sur mobile.
Étape 1 : deux utilisateurs, deux besoins opposés
D'abord, un constat simple : un utilisateur sur un grand écran desktop avec une fibre rapide, et un utilisateur sur un vieux smartphone en 4G limitée, n'ont ni les mêmes besoins ni les mêmes contraintes.
Étape 2 : le problème sans précaution
Pourtant, sans précaution, les deux téléchargeraient exactement la même image en pleine résolution. Cette leçon apprend à laisser le navigateur choisir, parmi plusieurs versions d'un même média, celle qui convient réellement.
Étape 3 : le premier outil, srcset/sizes
Voici le premier cas : fournir la MÊME image en plusieurs résolutions, pour économiser de la bande passante sur petit écran. C'est de l'optimisation pure — la composition de l'image ne change pas, seule sa taille de fichier varie.
Étape 4 : un besoin différent, l'art direction
Il existe un second besoin, souvent confondu avec le premier : servir une image RÉELLEMENT DIFFÉRENTE selon le contexte, par exemple un cadrage plus serré sur mobile. <picture> avec plusieurs <source> répond à ce besoin créatif, qu'on appelle "direction artistique".
| Besoin | Outil | La composition de l'image change-t-elle ? |
|---|---|---|
| Économiser la bande passante | srcset + sizes | Non, seule la résolution varie |
| Cadrage différent selon l'écran | <picture> + <source media> | Oui, art direction |
| Format moderne avec repli | <picture> + <source type> | Non, juste un format différent |
Prérequis
Cette leçon suppose que vous maîtrisez déjà <img> et ses attributs de base (alt, width, height, loading), vus dans la leçon sur les liens et images.
Étape 5 : passons à la vidéo et l'audio
Le même principe s'applique à la vidéo : un fichier unique ne convient pas à tous les navigateurs. On propose donc plusieurs <source> dans des formats différents (webm, mp4), le navigateur choisissant automatiquement le premier qu'il sait lire.
Étape 6 : un minimum d'accessibilité à ne pas oublier
Il reste un élément essentiel : <track> pour les sous-titres. Ce n'est pas un détail secondaire, c'est un minimum d'accessibilité pour les personnes sourdes ou malentendantes — et cela sert aussi ceux qui regardent une vidéo sans le son, dans les transports par exemple.
Le piège du chargement inutile
Enfin, un dernier piège fréquent : laisser le préchargement par défaut sans y réfléchir. preload="metadata" (vidéo) ou preload="none" (audio) évite de télécharger tout le fichier avant même que l'utilisateur ne clique sur lecture.
Piège fréquent
Ne confondez pas srcset (mêmes images, résolutions différentes) et <picture><source media="..."> (images réellement différentes). Utiliser <picture> juste pour "économiser du poids" au lieu de srcset complique le code inutilement sans bénéfice supplémentaire.
Et ensuite ?
Une fois les médias maîtrisés, la prochaine étape ouvre un tout nouveau chapitre : créer ses propres balises HTML avec les Web Components.
Commandes & code
Médias : vidéo, audio et images responsives
Servir le bon fichier, au bon format, à la bonne résolution, selon l'appareil.
<!-- Vidéo native avec plusieurs sources et sous-titres -->
<video controls width="800" poster="/videos/cours-poster.jpg" preload="metadata">
<source src="/videos/cours.webm" type="video/webm">
<source src="/videos/cours.mp4" type="video/mp4">
<track
kind="subtitles"
src="/videos/cours-fr.vtt"
srclang="fr"
label="Français"
default
>
<track kind="subtitles" src="/videos/cours-en.vtt" srclang="en" label="English">
<p>Votre navigateur ne supporte pas la vidéo HTML5. <a href="/videos/cours.mp4">Télécharger</a>.</p>
</video>
<!-- Audio -->
<audio controls preload="none">
<source src="/audio/podcast.ogg" type="audio/ogg">
<source src="/audio/podcast.mp3" type="audio/mpeg">
</audio><!-- picture : art direction (image différente selon contexte, pas juste redimensionnée) -->
<picture>
<source media="(min-width: 1024px)" srcset="/img/hero-desktop.webp" type="image/webp">
<source media="(min-width: 640px)" srcset="/img/hero-tablet.webp" type="image/webp">
<img src="/img/hero-mobile.jpg" alt="Interface de la plateforme Technologik" width="640" height="400">
</picture>
<!-- srcset + sizes : même image, résolutions multiples (pas d'art direction) -->
<img
src="/img/produit-800.jpg"
srcset="
/img/produit-400.jpg 400w,
/img/produit-800.jpg 800w,
/img/produit-1200.jpg 1200w,
/img/produit-1600.jpg 1600w
"
sizes="(max-width: 600px) 100vw, (max-width: 1024px) 50vw, 800px"
alt="Chaise ergonomique en bois clair"
loading="lazy"
decoding="async"
>
<!-- sizes indique au navigateur la largeur d'affichage AVANT le layout final,
pour choisir la bonne source dans srcset -->
<!-- Format moderne avec repli -->
<picture>
<source srcset="/img/photo.avif" type="image/avif">
<source srcset="/img/photo.webp" type="image/webp">
<img src="/img/photo.jpg" alt="Photo du produit" loading="lazy">
</picture>| Attribut | Usage |
|---|---|
srcset + w | densité/largeurs disponibles |
sizes | largeur d'affichage prévue selon media queries |
<picture><source media> | art direction (image différente, pas juste redimensionnée) |
decoding="async" | ne bloque pas le rendu pendant le décodage |
Résumé
srcset/sizesoptimise la bande passante ;<picture><source media>change carrément d'image.- Toujours fournir un format legacy (
jpg/mp4) en dernier<source>comme repli. <track>avec sous-titres.vttest un minimum d'accessibilité pour la vidéo.preload="metadata"(vidéo) /preload="none"(audio) évite de gaspiller de la bande passante.
Exercices pratiques
Mission : alléger boutique.html pour le mobile
Objectif : Corriger un rapport Lighthouse signalant un poids d'images excessif en servant des résolutions adaptées à chaque écran.
Contexte
Le rapport Lighthouse de boutique.html alerte : la même photo produit.jpg, de 1600px de large et pensée pour un écran desktop, est envoyée telle quelle à tous les visiteurs mobiles. La page contient aussi une bannière en haut de page qui doit montrer un cadrage plus large en desktop et un cadrage resserré sur mobile, pour rester lisible.
Ta mission : traiter ces deux problèmes, qui ne relèvent pas du même outil.