Responsive images
R
Definition complete
Les Responsive Images sont une technique HTML/CSS permettant de servir différentes versions d'une image selon la taille d'écran, la résolution (Retina) et le format supporté par le navigateur. L'objectif est d'éviter de charger une image de 2000px sur un écran mobile de 400px, gaspillant bande passante et dégradant les performances.
Deux attributs HTML clés : srcset définit les différentes tailles d'image disponibles avec leur largeur en pixels (hero-800.jpg 800w, hero-1200.jpg 1200w), et sizes indique la largeur d'affichage prévue selon les breakpoints ((max-width: 600px) 100vw, 50vw). Le navigateur choisit automatiquement l'image optimale.
L'élément <picture> va plus loin en permettant de servir différents formats (WebP avec fallback JPEG) et différents cadrages selon l'écran (art direction). C'est la solution la plus flexible pour les cas complexes comme les images hero qui changent de composition sur mobile.
L'impact sur les Core Web Vitals est significatif : les images représentent souvent 50%+ du poids d'une page. Des responsive images bien configurées peuvent réduire le LCP de plusieurs secondes sur mobile, améliorant directement le SEO et l'expérience utilisateur.
Exemples pratiques
- Image hero : <img srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w" sizes="100vw" src="hero-800.jpg" alt="...">
- Art direction : <picture> avec cadrage portrait sur mobile, paysage sur desktop, optimisant la composition pour chaque contexte.
- Format moderne : <picture><source srcset="image.avif" type="image/avif"><source srcset="image.webp" type="image/webp"><img src="image.jpg"></picture>
A quoi sert Responsive images ?
Les responsive images servent à réduire drastiquement le poids des pages sur mobile (jusqu'à -70%), améliorer le LCP et les Core Web Vitals pour le SEO, économiser la bande passante pour l'utilisateur et le serveur, et adapter les visuels aux différents contextes d'affichage. C'est une optimisation essentielle pour tout site avec beaucoup d'images.
Responsive images en pratique chez 123web
Chez 123web, nous implémentons systématiquement les responsive images dans nos développements. Nous configurons les pipelines de génération automatique des différentes tailles, intégrons les formats modernes (WebP, AVIF) avec fallbacks, et optimisons les sizes pour correspondre à vos layouts réels. Cette rigueur technique garantit des performances optimales sur tous les appareils.