Images et médias

Afficher images, vidéos et sons dans la page.

Imagine : ta page sans images ni médias, c’est un plan en noir et blanc : lisible, oui… mais un peu triste. Les visuels ajoutent la matière, la lumière et parfois le son. L’idée : charger ce qu’il faut, là où il faut pas plus (ton navigateur te dira merci).

5.1<img> : Afficher une image

La balise <img> affiche une image. Deux attributs à ne pas oublier :

src : le chemin du fichier (local ou URL)
alt : une description courte (accessibilité, SEO, et quand l’image ne charge pas)

<img src="images/maquette-facade.webp" alt="Maquette de la façade du bâtiment">

5.2Image décorative

Si l’image n’apporte aucune info (juste déco), mets l’attribut alt vide. Oui, vide. C’est volontaire : les lecteurs d’écran passeront leur chemin (comme nous devant une pub non ciblée).

<img src="icons/separateur.svg" alt="">

5.3<video> : Vidéo intégrée

Pour intégrer une vidéo locale, utilise <video>. Quelques options utiles :

controls : affiche les boutons (play/pause…)
autoplay, muted, loop : combo souvent utilisé pour une vidéo d’arrière-plan
toujours prévoir un texte de fallback (au cas où)

<video controls width="480">
  <source src="videos/visite-3d.mp4" type="video/mp4">
  La vidéo ne peut pas être lue sur ce navigateur.
</video>

5.4<audio> : Audio intégré

Même principe que la vidéo, mais pour le son (podcast, ambiance, voix off). On évite l’autoplay avec le son activé personne n’aime les jumpscares audio.

<audio controls>
  <source src="audio/ambiance-chantiers.mp3" type="audio/mpeg">
  Ton navigateur ne supporte pas l'audio HTML5.
</audio>

Conseils rapides

Formats recommandés : WEBP (images), SVG (icônes), MP4 (H.264) (vidéos)
Ne sers pas une image 2000px pour un affichage 200px (tes utilisateurs ont d’autres choses à télécharger )
Nomme tes fichiers clairement : banniere-accueil.webp, plan-coupe.svg…