When to Use fetchpriority on Images

Browsers already prioritise stylesheets over off-screen images and make many other scheduling decisions without our help. fetchpriority is useful when the page knows one resource matters more than the browser can tell from markup alone.

The usual candidate is a prominent image that becomes Largest Contentful Paint. This is a targeted hint, not an attribute to add to every image component.

Raise the priority of one important image

<img
  src="/hero.webp"
  alt="Main project image"
  fetchpriority="high"
>

The available values are:

high
low
auto

auto leaves the browser’s normal priority behaviour in place. Even high remains a hint; the browser still controls its network scheduler.

This markup provides no useful ranking at all:

<img src="1.webp" fetchpriority="high">
<img src="2.webp" fetchpriority="high">
<img src="3.webp" fetchpriority="high">
<img src="4.webp" fetchpriority="high">

If everything is urgent, nothing has become more important.

Priority and lazy loading solve different problems

loading="lazy" can delay when an image starts fetching:

loading="lazy"

fetchpriority="high" changes the priority once the resource is fetched:

fetchpriority="high"

Combining them on the main hero is contradictory:

<img
  loading="lazy"
  fetchpriority="high"
>

An image needed immediately should normally avoid lazy loading. Add high priority only when measurement shows that its request is not being scheduled strongly enough.

fetchpriority="low" can soften a less important request:

<img
  src="/decorative.webp"
  alt=""
  fetchpriority="low"
>

I rarely need it for below-the-fold images because native lazy loading expresses that intent more directly.

Preload changes discovery, not just priority

A preload lets the browser discover a resource before normal parsing would find it:

<link
  rel="preload"
  as="image"
  href="/hero.webp"
>

fetchpriority applies a priority hint to a resource already represented in the document. The two can appear together in some cases, but stacking them without inspecting the network waterfall is not twice the optimization.

Keep the rest of the image markup useful

A realistic hero still needs responsive sources, dimensions, and meaningful alternative text:

<img
  src="/hero-1200.webp"
  srcset="
    /hero-600.webp 600w,
    /hero-1200.webp 1200w,
    /hero-1800.webp 1800w
  "
  sizes="100vw"
  width="1800"
  height="1200"
  fetchpriority="high"
  alt="Main project photograph"
>

Before adding the hint, test when the LCP request starts and how the browser prioritises it. If it already begins immediately, the attribute may change very little.

I would not hide fetchpriority="high" in a universal image partial. I would place it on the one early image that performance tools show needs help. Priority hints work best when they remain rare enough to mean something.