Module 2Structurer et enrichir une page
Chapitre 6 sur 13
Images et médias
Images, texte alternatif, formats, figure, images responsives, audio, vidéo et iframe.
- ≈ 165 min
- 7 leçons
- 4 vidéos
- 3 exercices
Module 2Structurer et enrichir une page
Chapitre 6 sur 13
Images, texte alternatif, formats, figure, images responsives, audio, vidéo et iframe.
Objectifs
Avec ce chapitre, tu sauras…
<img> et ses attributs src, alt, width et height ;<figure> et <figcaption> ;srcset, sizes et <picture> ;<audio> et <video> ;<iframe>.Une page sans image est rare. Mais une image mal intégrée coûte cher : elle ralentit la page, la rend inaccessible aux personnes aveugles, et fait « sauter » la mise en page pendant le chargement. Ce chapitre t'apprend à intégrer les médias comme un professionnel.
Leçon 1
<img src="images/medina-fes.jpg" alt="Ruelle de la médina de Fès avec des étals de cuir" width="800" height="533">Tableau: Les attributs de img
| Attribut | Rôle | Obligatoire ? |
|---|---|---|
src | le chemin de l'image (relatif ou absolu, comme un lien) | oui |
alt | le texte alternatif : décrit l'image si elle ne s'affiche pas | oui (validation W3C) |
width / height | dimensions intrinsèques en pixels, sans unité | fortement recommandé |
loading="lazy" | ne charge l'image que quand elle approche de l'écran | recommandé hors du haut de page |
title | info-bulle au survol | non (et peu utile) |
Vidéo · À regarder
FRHTML en 1 HEURE - Formation HTML complète en 2025
Melvynx · YouTube
Vidéo · À regarder
FR[TUTO] Les BASES du HTML
Bertrand . Tech · YouTube
Leçon 2
| Situation | Mauvais alt | Bon alt |
|---|---|---|
| photo d'un produit | alt="image" | alt="Babouches en cuir jaune, taille 42" |
| logo cliquable vers l'accueil | alt="logo.png" | alt="Atelier Web Casa — accueil" |
| graphique de ventes |
Leçon 3
| Format | Idéal pour | Transparence | Remarque |
|---|---|---|---|
| JPG (JPEG) | photos | non | compression avec perte, fichiers légers |
| PNG | captures d'écran, images avec transparence | oui | sans perte, fichiers plus lourds |
| GIF | petites animations | oui (simple) |
Leçon 4
Leçon 5
| Morceau | Sens |
|---|---|
srcset="... 400w, ... 800w" | la liste des fichiers disponibles et leur largeur réelle (w = pixels de large) |
sizes="(max-width: 600px) 100vw, 50vw" | « sur un écran de 600 px ou moins, l'image occupe toute la largeur ; sinon, la moitié » |
src | l'image de secours pour les très vieux navigateurs |
Vidéo · À regarder
ENHTML Full Course for Beginners | Complete All-in-One Tutorial | 4 Hours
Dave Gray · YouTube
Leçon 6
| Attribut | Rôle |
|---|---|
controls | affiche les boutons lecture, pause, volume (presque toujours nécessaire) |
poster | image affichée avant la lecture (vidéo uniquement) |
autoplay | lecture automatique : bloquée par les navigateurs, sauf avec muted |
muted | son coupé au départ |
loop | lecture en boucle |
Leçon 7
Vidéo · À regarder
FRHTML en 1 HEURE - Formation HTML complète en 2025
Melvynx · YouTube
1Quel attribut de <img> indique le chemin du fichier ?
2Pour un logo, le meilleur format est souvent…
3Pour une image purement décorative, on écrit…
4Pourquoi préciser width et height ?
5Quel attribut affiche les boutons d'une vidéo ?
6Une vidéo en autoplay n'est autorisée par les navigateurs que si elle est…
L'essentiel du chapitre
<img src="..." alt="..." width="..." height="..."> : src et alt obligatoires, dimensions fortement recommandées.alt décrit ce que l'image apporte ; alt="" pour une image décorative ; jamais d'image sans alt.<figure> + <figcaption> pour une image légendée ; srcset/sizes et <picture> pour le responsive.<video controls> et <audio controls> avec plusieurs <source> ; <track> pour les sous-titres.<iframe> pour YouTube ou une carte, toujours avec title et loading="lazy".alt="graphique"alt="Ventes 2026 : hausse de 30 % entre janvier et juin" |
| motif décoratif | (pas d'attribut alt) | alt="" |
| 256 couleurs seulement, format ancien |
| SVG | logos, icônes, illustrations | oui | vectoriel : net à toutes les tailles, très léger |
| WebP | photos et images en général | oui | 25 à 35 % plus léger que JPG, supporté partout |
| AVIF | photos | oui | encore plus léger, format récent |
preloadnone, metadata ou auto : ce qu'il faut précharger |
<track> | sous-titres au format WebVTT (.vtt) |
Sans dimensions, le navigateur ne sait pas quelle place réserver tant que l'image n'est pas téléchargée : le texte s'affiche, puis saute vers le bas quand l'image arrive. Avec width et height, la place est réservée dès le départ. Google mesure ce défaut (on l'appelle le CLS, Cumulative Layout Shift) et pénalise les pages qui sautent. Le CSS pourra ensuite redimensionner l'image en gardant ses proportions.
Les images en trois minutes : la balise <img> et ses attributs principaux.
Les images expliquées par un autre auteur. Après le segment, vérifie que chacune de tes images a bien un alt.
Le texte alt est lu par les lecteurs d'écran, affiché si l'image ne se charge pas, et utilisé par Google Images. C'est l'attribut d'accessibilité le plus important du HTML.
alt="" (vide, mais présent) : le lecteur d'écran l'ignorera ;alt décrit la destination du lien.Tableau: Exemples d'alt
Tableau: Les formats d'image du web
<figure> regroupe un contenu autonome (image, schéma, extrait de code) et sa légende <figcaption>.
<figure>
<img src="images/hassan-ii.webp" alt="La mosquée Hassan II au coucher du soleil, vue depuis la corniche"
width="1200" height="800" loading="lazy">
<figcaption>La mosquée Hassan II à Casablanca, inaugurée en 1993.</figcaption>
</figure>Les deux ne font pas double emploi. Le alt remplace l'image pour qui ne la voit pas ; la <figcaption> est une légende visible par tous, qui ajoute une information (date, auteur, contexte). Évite simplement de recopier mot pour mot l'un dans l'autre.
Un téléphone n'a pas besoin de la même image qu'un écran 4K. HTML permet de proposer plusieurs versions et de laisser le navigateur choisir.
<img src="images/plage-800.jpg"
srcset="images/plage-400.jpg 400w,
images/plage-800.jpg 800w,
images/plage-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Plage de Taghazout à marée basse" width="800" height="533">Tableau: Lire ce code
<picture>
<source srcset="images/equipe.avif" type="image/avif">
<source srcset="images/equipe.webp" type="image/webp">
<img src="images/equipe.jpg" alt="L'équipe de l'agence réunie dans les bureaux" width="1200" height="600">
</picture>Le navigateur prend la première source qu'il sait lire ; s'il n'en lit aucune, il affiche le <img>. Le <img> final est obligatoire : c'est lui qui porte le alt.
<video controls width="640" height="360" poster="videos/apercu.jpg">
<source src="videos/presentation.webm" type="video/webm">
<source src="videos/presentation.mp4" type="video/mp4">
<track src="videos/sous-titres-fr.vtt" kind="subtitles" srclang="fr" label="Français" default>
Ton navigateur ne lit pas les vidéos HTML5. <a href="videos/presentation.mp4">Télécharger la vidéo</a>.
</video>
<audio controls>
<source src="audio/podcast-episode-1.mp3" type="audio/mpeg">
Ton navigateur ne lit pas l'audio HTML5.
</audio>Tableau: Les attributs de video et audio
Une <iframe> affiche une autre page web dans ta page : une vidéo YouTube, une carte Google Maps, un formulaire externe.
<iframe width="560" height="315"
src="https://www.youtube.com/embed/rRt-yvGQST0?start=793"
title="Apprendre le HTML : la structure d'une page"
loading="lazy"
allow="accelerometer; clipboard-write; encrypted-media; picture-in-picture"
allowfullscreen></iframe>Dans un lien, ajoute &t=793s (ou ?t=793 sur youtu.be). Dans une iframe, ajoute ?start=793 à l'adresse /embed/. C'est exactement ce que font les liens des encadrés vidéo de ce cours. Pour obtenir le code de l'iframe : sur YouTube, Partager → Intégrer.
Chaque <iframe> doit avoir un title qui décrit son contenu : c'est ce que le lecteur d'écran annonce. Ajoute aussi loading="lazy" : une iframe YouTube pèse plus de 500 Ko.
Les images locales et l'ajout d'un script : le segment montre comment référencer des fichiers de ton propre dossier, en complément de la section 1.
Crée une page « Podcast » contenant : un lecteur audio avec deux sources (MP3 et OGG), une vidéo avec image d'aperçu et sous-titres français, et la carte Google Maps de ton école dans une iframe (Google Maps → Partager → Intégrer une carte). Toutes les iframes ont un title.
Écris l'attribut alt le plus adapté dans chaque cas : (a) la photo du directeur sur la page « Notre équipe » ; (b) une icône de loupe dans un bouton de recherche, sans texte à côté ; (c) une bordure ornementale entre deux sections ; (d) une affiche qui annonce « Portes ouvertes — samedi 14 novembre, 10 h ».
Crée une galerie de trois photos de villes marocaines. Chaque photo est dans une <figure> avec une <figcaption>, un alt descriptif, des dimensions et un chargement différé.
Une <img> sans attribut alt est invalide, et le lecteur d'écran lit alors… le nom du fichier : « IMG underscore 2026 underscore 0412 point jpg ». alt="" (vide) et pas d'alt du tout n'ont pas le même sens.
En complément (anglais) : le chapitre « Add Images » de Dave Gray, une demi-heure sur les images, pour approfondir les notions de ce chapitre. Code en même temps que lui.
Les navigateurs bloquent autoplay avec le son, car c'est une expérience très désagréable. Si tu veux une vidéo d'arrière-plan qui démarre seule, il faut autoplay muted loop playsinline. Et pense aux sous-titres : beaucoup de gens regardent les vidéos sans le son.