Module 5 — Les preuves visuelles : images et médias | Faites entrer HTML

Une image peut mentir.
Mais bien utilisée, elle parle plus qu’un aveu.
Encore faut-il savoir la présenter au dossier.

🎯 Objectifs d’apprentissage

À la fin de ce module, vous serez capable de :

Intégrer des images optimisées pour le web
Comprendre les formats d’images web et leurs usages
Ajouter des médias responsives (images, audio, vidéo)
Utiliser les médias comme de vraies preuves, pas comme des gadgets

🖼️ Images de base — La pièce à conviction

L’image se pose avec la balise <img>.
Simple, directe, sans fioritures.

<img src="preuves/suspect.jpg"
     alt="Photographie du suspect prise à 23h17"
     width="800"
     height="600">

🔍 À retenir

<img> est auto-fermante
src : chemin vers l’image
alt : description textuelle
width / height : dimensions intrinsèques

♿ L’attribut `alt` — Le témoignage obligatoire

Sans alt, l’image est muette pour :

Les lecteurs d’écran
Les connexions lentes
Les moteurs de recherche

<img src="scene.jpg" alt="Scène de crime vue de dessus">

Règle simple : 👉 si l’image disparaît, le texte doit suffire.

🧩 Formats d’image web — Choisir la bonne preuve

Chaque format a sa spécialité.

JPG / JPEG
- Photos
- Compression avec perte
- Léger et efficace
PNG
- Transparence
- Images nettes
- Plus lourd
SVG
- Vectoriel
- Logos, icônes
- Parfaitement scalable
WebP
- Moderne
- Léger
- Excellent compromis

Un bon enquêteur ne charge jamais inutilement son dossier.

📐 Dimensions intrinsèques vs CSS

width / height HTML → définissent la taille réelle de l’image
CSS → contrôle l’affichage visuel

<img src="indice.jpg" alt="Indice clé" width="600" height="400">

Cela évite les sauts de mise en page (CLS). Le navigateur aime savoir à quoi s’attendre.

📱 Images responsives — Adapter la preuve au terrain

Une seule image pour tous les écrans ? Mauvaise idée.

🧠 `<picture>` — Choix intelligent

<picture>
    <source media="(min-width: 1200px)" srcset="preuves/grande.jpg">
    <source media="(min-width: 768px)" srcset="preuves/moyenne.jpg">
    <img src="preuves/petite.jpg"
         alt="Photo du suspect dans la ruelle">
</picture>

Le navigateur choisit la meilleure version
Gain de performance
Expérience optimale

🖼️ Figure et légende — Contexte officiel

Quand une image a besoin d’explication, on l’encadre.

<figure>
    <img src="plan.jpg" alt="Plan du quartier surveillé">
    <figcaption>Plan du quartier — zone sous surveillance</figcaption>
</figure>

<figure> : contenu autonome
<figcaption> : contexte clair
Parfait pour articles, rapports, dossiers

🎬 Médias natifs — Audio et vidéo

Ici, pas de plateformes externes. Tout est sous contrôle.

🎥 Vidéo native HTML

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

Options utiles

controls : lecture, pause, volume
autoplay (à éviter)
muted
loop
poster="apercu.jpg"

🎧 Audio natif HTML

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

Léger
Accessible
Parfait pour interviews et témoignages

⭐ Favicon — L’insigne du dossier

Petit détail. Grande importance.

<link rel="icon" href="favicon.ico">

Visible dans l’onglet
Renforce l’identité
Donne du sérieux

À placer dans le <head>.

🎨 Image de fond — Via CSS

Les images décoratives ne vont jamais en HTML.

body {
    background-image: url("fond-archive.jpg");
    background-size: cover;
    background-position: center;
}

HTML = contenu
CSS = décor

Toujours séparer les rôles.

Fin du module 5. Les preuves visuelles sont versées au dossier. La vérité commence à prendre forme.

Module 5 — Les preuves visuelles : images et médias