How to fix header logo loading

[solar shore]

I tried this:

fetchpriority="low" > fetchpriority="auto"

to test it, it worked, but it still gave the same problem:

This IMG tag is above the fold and could be eagerly-loaded to improve performance.

[zenith olive]

Hi @solar shore. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

For above-the-fold images like a header logo, you should use the priority prop on Astro's <Image /> component. This automatically sets the optimal loading attributes for images that are immediately visible when the page loads. [priority prop]

---
import { Image } from 'astro:assets';
import logo from '../assets/logo.png';
---

<Image src={logo} alt="My site logo" priority />

When priority is set, Astro will automatically apply these attributes:

loading="eager"
decoding="sync"
fetchpriority="high"

This tells the browser to load the image immediately, which is exactly what you want for an above-the-fold element like a header logo. [priority prop]

Note: The priority prop was added in [email protected]. Make sure you're on a compatible version.

If you need to customize individual attributes further, you can still set loading, decoding, and fetchpriority manually on the <Image /> component, as the priority prop does not prevent you from overriding them.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: