fetchpriority=high for Images — Does It Help?

By Gaurav Bhowmick

Google keeps recommending fetchpriority="high" for your Largest Contentful Paint image. But what does it actually do, when does it help, and when does it backfire?

What fetchpriority does. The fetchpriority attribute tells the browser how important a resource is relative to others of the same type. Setting it to "high" on an image tells the browser to download that image before other images. It does not make the download faster — it changes the order.

When it helps: your LCP image. If your largest visible image is below the fold in the HTML or loaded via CSS background, the browser might not prioritise it. Adding fetchpriority="high" tells the browser this image matters most. In Google\'s own tests, this improved LCP by 300-700 ms on median pages.

When it hurts: putting it on everything. If you set fetchpriority="high" on five images, the browser has to load all five with equal high priority. That is the same as no priority hint at all. Worse, it can delay other critical resources like fonts and CSS. Use it on exactly one image — your LCP element.

Combine it with proper sizing. fetchpriority does not fix a 4 MB hero image. You still need to compress and resize images appropriately. A 200 KB WebP hero with fetchpriority="high" loads faster than a 2 MB JPEG with the same attribute. Priority ordering plus small file size is the winning combination.

The full LCP checklist. (1) Compress your hero image to under 200 KB. (2) Use WebP or AVIF format. (3) Add fetchpriority="high" to the hero img tag. (4) Add loading="eager" (not lazy) to the hero image. (5) Preload the image if it is a CSS background. These five steps together typically improve LCP by 1-3 seconds on image-heavy pages.

fetchpriority is supported in Chrome 101+, Edge 101+, and Safari 17.2+. Firefox does not support it yet but ignores the attribute gracefully, so there is no downside to adding it.

Frequently asked questions

Should I use fetchpriority on lazy-loaded images?

No. Lazy-loaded images use loading="lazy" which defers them. Adding fetchpriority="high" creates a contradictory signal. Use fetchpriority="high" only on above-the-fold images with loading="eager" or no loading attribute.

Does fetchpriority work with Next.js Image component?

Yes. In Next.js, setting priority={true} on the Image component automatically adds fetchpriority="high" and disables lazy loading for that image.

Can fetchpriority replace preload for images?

For standard img tags, yes. For CSS background images or images added via JavaScript, you still need a preload link tag because the browser cannot discover them from HTML alone.

What is the difference between fetchpriority and loading attributes?

loading controls when the browser starts fetching (eager = immediately, lazy = when near viewport). fetchpriority controls the order among resources that are being fetched. They are complementary, not alternatives.

🔧

Try MiniPx — free, no signup

Compress, convert, and resize images in your browser. Nothing gets uploaded.

Open MiniPx →