Qu'est-ce que Constructeur d'attributs de chargement d'image ?
Les balises img modernes beneficient de plusieurs attributs de performance utilises ensemble : loading controle le chargement differe, decoding controle la façon dont l'image est decodee, et fetchpriority signale l'importance. Les utiliser correctement ensemble est plus efficace que de les definir isolement.
Réponse rapide
Utilisez loading='lazy' pour les images hors ecran afin de differer le chargement jusqu'a ce que l'utilisateur defile pres d'elles. Utilisez loading='eager' ou omettez l'attribut pour les images au-dessus de la ligne de flottaison qui doivent se charger immediatement.
Last updated: 2026-05-25
Limites
- Le chargement differe reporte les requetes d'image mais ne reduit pas le poids total de la page -- les images sont toujours telechargees lorsqu'elles defilent dans la vue.
- Le navigateur reserve un espace reserve pour les images differees avant leur chargement, ce qui peut affecter la mise en page si les attributs width et height sont absents.
- Utiliser loading='lazy' sur les images au-dessus de la ligne de flottaison peut retarder le LCP et nuire a l'experience utilisateur.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Comment utiliser cet outil
- Choisissez le cas d'usage de l'image qui correspond a l'endroit ou elle apparaît sur la page.
- L'outil definit la combinaison d'attributs recommandee pour ce cas d'usage.
- Saisissez le chemin de l'image, les dimensions et le texte alt.
- Copiez la balise img complete dans votre page.
A quoi il sert
- Construire une image hero avec loading='eager', decoding='sync' et fetchpriority='high'.
- Creer des images d'article en chargement differe avec loading='lazy' et decoding='async'.
- Optimiser les galeries de vignettes avec des attributs de chargement et decodage appropries.