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.webpmon-image_large.pngmon-image_mobile.webpmon-image_mobile.png
Cela permet de générer automatiquement les balises HTML à partir d’un nom de base commun.
🔗 Ressources associées
📚 Références
💡 Si vous constatez qu’un lien est brisé ou obsolète, n’hésitez pas à me le signaler afin que je puisse le corriger. Merci !
🚀 Restez informé de la parution de nouveaux articles !
Vous y découvrirez des outils et des bonnes pratiques pour le développement informatique et pour la productivité.
Abonnez-vous à la newsletter pour ne rien manquer.
S’inscrire