Quick Guides 2 min read · June 20, 2026

Should I Use fetchpriority="high" or rel="preload" for My LCP Image?

Use fetchpriority="high" on the <img> element when your LCP image is already in the HTML. Use rel="preload" when the browser discovers the image late — because it lives behind a CSS file, a JavaScript file, or a request chain. In most cases, the right answer is one or the other, not both.

Quick answer: If your LCP image is an <img> tag in the HTML, add fetchpriority="high" to it. If it is discovered late via CSS or JavaScript, add <link rel="preload" as="image"> in the <head>. Don't use both on the same plain <img> — you will download it twice.

The key difference: discovery vs. priority

Both hints push your LCP image up the queue, but they fix different problems.

fetchpriority="high" tells the browser to download this image before other same-priority resources. It does not change when the browser discovers the image — only how urgently it fetches it once it does.

Image in HTML HTML
<img src="hero.avif" alt="..." fetchpriority="high" width="1200" height="675" />

rel="preload" moves discovery to the <head>, so the browser sees the image request before it has even parsed the <body>. It is the right tool when an image would otherwise sit behind a request chain — for example, a CSS background-image that the browser cannot discover until the stylesheet has downloaded and been parsed.

Late-discovered image HTML
<link rel="preload" as="image" href="hero.avif" />

Which one to use

Your LCP is an <img> tag directly in the HTML. The browser finds it during HTML parsing. Add fetchpriority="high" to the <img> element. You do not need a preload hint — the browser has already discovered the image.

Your LCP is a CSS background-image or injected by JavaScript. The browser cannot see it until the CSS or JavaScript has loaded. Use <link rel="preload" as="image"> in the <head> to pull the fetch forward, and add fetchpriority="high" to that preload link to give it maximum priority.

Preload + priority HTML
<link
  rel="preload"
  as="image"
  href="/hero.avif"
  fetchpriority="high"
/>

Google's LCP guidance targets a 2.5-second threshold for a "good" score at the 75th percentile. For a hero image, a late-discovered fetch can add a second or more of resource load delay — often the single biggest gain available once you have already compressed the file.

The one mistake to avoid

Do not add both a preload link and fetchpriority="high" on a plain <img> tag for the same image. You will request the image twice and waste bandwidth — one of the most common self-inflicted LCP regressions.

Make either hint count

Get the image small enough that the priority hint actually moves your LCP. Use mochify.app to compress and convert your hero image to AVIF or WebP before wiring up the hints — try prompting "convert to AVIF and optimise for a 1200px hero slot" to get a web-ready file in seconds.

Try it free

Related Guides