Générateur de srcset et sizes pour images responsive
Générez l’attribut srcset et sizes d’une image responsive (HTML), directement dans le navigateur.
Nommez vos fichiers photo-320w.jpg, photo-640w.jpg, etc. Ajustez « sizes » selon votre mise en page.
🔒 100 % côté client — aucune donnée envoyée
Générez les attributs srcset et sizes pour vos images HTML responsive et servez la bonne résolution à chaque écran. L'outil s'exécute 100% dans votre navigateur, sans upload d'image ni envoi de données. Un moyen simple d'améliorer les performances et le score Core Web Vitals de vos pages.
À quoi ça sert ?
- ▸ Servir des images adaptées aux écrans mobiles et Retina
- ▸ Réduire le poids des pages et améliorer le LCP
- ▸ Générer le markup srcset pour une balise img ou picture
- ▸ Définir des points de rupture sizes cohérents avec le design
FAQ
À quoi sert l'attribut srcset ?
L'attribut srcset fournit au navigateur plusieurs versions d'une image à différentes résolutions ; il choisit la plus adaptée selon la taille de l'écran et la densité de pixels, ce qui évite de télécharger une image trop lourde.
Quelle est la différence entre srcset et sizes ?
srcset liste les images disponibles avec leur largeur, tandis que sizes indique au navigateur la largeur d'affichage prévue selon la mise en page. Les deux sont nécessaires pour un choix optimal.
Faut-il utiliser srcset avec la balise picture ?
srcset s'utilise directement sur une balise img pour la résolution, et dans les balises source d'un élément picture lorsque vous voulez aussi changer d'image selon des conditions (art direction).