🖼️ Structure d’image responsive avec picture et srcset

Pour améliorer le temps de chargement et l’adaptabilité de vos images sur tous les écrans, la balise <picture> combinée avec srcset est un outil précieux. Elle permet au navigateur de choisir automatiquement la version d’image la plus adaptée à la taille et aux capacités de l’appareil.

📐 Pourquoi utiliser <picture> et srcset ?

• 📱 Affiche une image différente selon la taille de l’écran (mobile, desktop, retina…)
• ⚡ Permet de charger une image plus légère si une haute définition n’est pas nécessaire
• 🌐 Permet d’utiliser des formats modernes (ex. WebP) avec un fallback vers PNG ou JPEG

🛠️ Structure type d’une image responsive

<picture>
  <source srcset="mon-image_mobile.webp" media="(max-width: 768px)" type="image/webp">
  <source srcset="mon-image_large.webp" type="image/webp">
  <img src="mon-image_large.png"
       alt="Description de l'image"
       width="800"
       height="600"
       loading="lazy"
       style="max-width: 100%; height: auto;">
</picture>

Ce code fournit :

• 🟢 une version mobile légère en WebP si l’écran est petit,
• 🟢 une version haute définition en WebP pour les autres cas,
• 🔙 un fallback PNG si le navigateur ne supporte pas WebP.

📎 Astuce : noms de fichiers normalisés

Pour automatiser la génération de ces images, adoptez une convention :

• mon-image_large.webp
• mon-image_large.png
• mon-image_mobile.webp
• mon-image_mobile.png

Cela permet de générer automatiquement les balises HTML à partir d’un nom de base commun.

🔗 Ressources associées

• 💾 Compresser une image PNG en WebP
• 📏 Pourquoi déclarer width et height sur les images