All my images appear to be lazy loaded even if above the fold. How does Astro determine whether to lazy or eager load and when are they actually eager loaded?
#Image loading
rose sapphire
brisk rainBOT
Hi @rose sapphire. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Astro's default behavior for image loading is indeed to lazy load images, even those above the fold. However, you can control this behavior and optimize image loading for better performance. Here's how Astro handles image loading and how you can adjust it:
By default, the <Image /> component in Astro sets the loading attribute to "lazy" for all images. This is mentioned in the Image component properties documentation:
loading: attributes.loading ?? 'lazy',
decoding: attributes.decoding ?? 'async',
To eager load images, especially those above the fold, you have a couple of options:
-
Manually set the
loadingattribute:
You can override the default lazy loading behavior by explicitly setting theloadingattribute to "eager" on your<Image />component:<Image src={myImage} alt="Description" loading="eager" /> -
Use the
priorityattribute:
For your largest, most important above-the-fold image, you can use thepriorityattribute. This will automatically set the image to load eagerly. As mentioned in the Image properties documentation:priority: If set, eagerly loads the image. Otherwise images will be lazy-loaded. Use this for your largest above-the-fold image. Defaults to `false`.You can use it like this:
<Image src={myImage} alt="Description" priority />
It's important to note that Astro doesn't automatically determine which images should be eager loaded. This decision is left to the developer to optimize based on the specific needs of their site layout and content.
For the best performance, it's recommended to eager load critical above-the-fold images and lazy load the rest. This approach helps to balance fast initial page loads with efficient resource usage.