Partie 6 — Images & médias : images, chemins, formats et responsive images

Les images sont souvent la première chose que l’on remarque sur un site web. Elles attirent l’attention, expliquent un message et renforcent la crédibilité.

Pourtant, les images sont aussi l’une des principales causes de sites lents et mal optimisés lorsqu’elles sont mal utilisées.

Dans cette partie, vous allez apprendre à utiliser les images et médias comme un développeur professionnel : proprement, efficacement et de manière responsive.

👉 Une bonne image améliore l’expérience utilisateur, une mauvaise image la détruit.

1) La balise <img> : afficher une image

En HTML, les images sont affichées avec la balise <img>. C’est une balise auto-fermante.

Structure de base :

<img src="images/photo.jpg" alt="Description de l’image">
  

Les attributs essentiels :

• src : chemin vers l’image
• alt : description textuelle

❌ Erreur fréquente : oublier l’attribut alt.

2) L’attribut alt : accessibilité et SEO

L’attribut alt décrit l’image avec des mots.

Il est utilisé par :

• les lecteurs d’écran (accessibilité)
• les moteurs de recherche
• le navigateur si l’image ne charge pas

Bon exemple

<img src="images/team.jpg" alt="Équipe de développeurs travaillant ensemble">
  

Mauvais exemple

<img src="images/team.jpg" alt="image">
  

3) Les chemins d’images : comprendre où elles se trouvent

Les chemins indiquent au navigateur où trouver l’image.

Exemple de structure de projet

/site
 ├── index.html
 ├── images/
 │   ├── logo.png
 │   └── hero.jpg
 └── css/
     └── style.css
  

Depuis index.html :

<img src="images/logo.png" alt="Logo du site">
  

Les chemins doivent être exacts. Une seule erreur et l’image ne s’affiche pas.

4) Les formats d’images : lequel choisir ?

Tous les formats d’images ne servent pas au même usage.

Bon réflexe : utiliser WebP quand c’est possible.

5) Taille des images : ne jamais laisser par défaut

Une image trop grande ralentit le site.

Bonnes pratiques :

• Redimensionner l’image avant de l’utiliser
• Ne pas utiliser une image 4000px pour un affichage 400px
• Laisser le CSS gérer l’affichage

img {
  max-width: 100%;
  height: auto;
}
  

6) Images responsives : s’adapter à tous les écrans

Un site moderne doit fonctionner sur mobile, tablette et desktop.

Solution simple avec CSS :

img {
  max-width: 100%;
  display: block;
}
  

Pour des cas avancés, HTML propose srcset :

<img 
  src="images/photo-800.jpg"
  srcset="images/photo-400.jpg 400w,
          images/photo-800.jpg 800w,
          images/photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 90vw, 800px"
  alt="Photo responsive">
  

Le navigateur choisit automatiquement la meilleure image.

7) Autres médias : vidéo et audio (bases)

Vidéo HTML

<video controls width="100%">
  <source src="video/presentation.mp4" type="video/mp4">
  Votre navigateur ne supporte pas la vidéo.
</video>
  

Audio HTML

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

8) Erreurs fréquentes à éviter

• Images trop lourdes
• Absence d’attribut alt
• Mauvais chemins
• Images non responsives

👉 Une image doit être utile, pas décorative uniquement.

Vous savez maintenant intégrer correctement des images et médias en HTML : bons chemins, bons formats, optimisation et responsive design.

Dans la Partie 7, nous verrons comment utiliser les tableaux HTML, quand les utiliser et comment les structurer proprement.

✅ Un site rapide et clair commence par des images bien maîtrisées.