Médias

<!-- Image responsive : srcset + sizes + width/height (anti-CLS) + lazy + decoding.
     width/height = dimensions intrinsèques de la plus grande source (pour le ratio).
     Le CSS (reset) applique max-inline-size:100% + block-size:auto → l'image
     remplit son conteneur en gardant son ratio. -->
<img src="https://picsum.photos/seed/peels/400/300"
     width="1200" height="900"
     srcset="https://picsum.photos/seed/peels/400/300 400w,
             https://picsum.photos/seed/peels/800/600 800w,
             https://picsum.photos/seed/peels/1200/900 1200w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Image responsive avec srcset"
     loading="lazy"
     decoding="async">

<!-- Art direction : paysage large sur desktop, carré sur mobile. Ratios différents. -->
<picture>
  <source media="(min-width: 800px)" srcset="https://picsum.photos/seed/peels-wide/1200/600">
  <source media="(min-width: 400px)" srcset="https://picsum.photos/seed/peels-square/600/600">
  <img src="https://picsum.photos/seed/peels-square/400/400"
       width="1200" height="600"
       alt="Image adaptative — paysage sur desktop, carré sur mobile"
       loading="lazy"
       decoding="async">
</picture>

<!-- Vidéo : controls + header officiel + width/height (anti-CLS) + playsinline (iOS) +
     preload metadata + sources WebM + sous-titres anglais + attribution -->
<video controls crossorigin="anonymous"
       poster="https://studio.blender.org/files/public/header/project/ff/3d/ff3d8a8048e767cbc92d6489404924b2.jpg"
       width="1280" height="536"
       preload="metadata"
       playsinline>
  <source src="https://upload.wikimedia.org/wikipedia/commons/transcoded/7/76/Sprite_Fright_-_Blender_Open_Movie-full_movie.webm/Sprite_Fright_-_Blender_Open_Movie-full_movie.webm.1080p.vp9.webm"
          type="video/webm">
  <track kind="subtitles" srclang="en" label="English" default
         src="https://commons.wikimedia.org/w/api.php?action=timedtext&amp;title=File%3ASprite_Fright_-_Blender_Open_Movie-full%20movie.webm&amp;lang=en&amp;trackformat=vtt&amp;origin=*">
  <a href="https://upload.wikimedia.org/wikipedia/commons/transcoded/7/76/Sprite_Fright_-_Blender_Open_Movie-full_movie.webm/Sprite_Fright_-_Blender_Open_Movie-full_movie.webm.1080p.vp9.webm">Télécharger la vidéo (WebM)</a>
  <p>Sprite Fright par Blender Studio, sous licence <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</p>
</video>

<!-- Audio : controls + preload metadata + public-domain laughter source -->
<audio controls preload="metadata">
  <source src="https://upload.wikimedia.org/wikipedia/commons/c/c6/Laughter.ogg?utm_source=commons.wikimedia.org&amp;utm_campaign=imageinfo&amp;utm_content=original"
          type="audio/ogg">
  <a href="https://upload.wikimedia.org/wikipedia/commons/c/c6/Laughter.ogg">Télécharger l'audio (OGG)</a>
  <p>« Laughter.ogg » par ezwa, domaine public.</p>
</audio>

<!-- Figure : image responsive (srcset + width/height anti-CLS) + figcaption.
     La structure est la même pour tout contenu (code, citation, galerie) — seul le contenu change. -->
<figure>
  <img src="https://picsum.photos/seed/peels/800/400"
       width="1200" height="600"
       srcset="https://picsum.photos/seed/peels/400/200 400w,
               https://picsum.photos/seed/peels/800/400 800w,
               https://picsum.photos/seed/peels/1200/600 1200w"
       sizes="100vw"
       alt="Photo de démonstration au coucher de soleil"
       loading="lazy"
       decoding="async">
  <figcaption>Figure 1 — Exemple d'image avec légende descriptive.</figcaption>
</figure>

<iframe
  title="Big Buck Bunny — court métrage de la Blender Foundation"
  width="560"
  height="315"
  src="https://www.youtube-nocookie.com/embed/aqz-KE-bpKQ"
  loading="lazy"
  referrerpolicy="strict-origin-when-cross-origin"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
  allowfullscreen
  sandbox="allow-same-origin allow-scripts allow-presentation">
</iframe>