Optimize image priority

Browsers use heuristics to assign loading priorities to images, but these defaults may not always align with your page's Largest Contentful Paint (LCP).

Using fetchpriority on an <img> element allows you to explicitly signal an image's importance to the browser, ensuring critical images load faster while non-essential ones don't compete for bandwidth.

The loading=lazy attribute prevents images from being downloaded at all when sufficiently off-screen which can further help prioritize images.

How to implement

1. Identify the LCP image: Determine which image is the most likely candidate for the Largest Contentful Paint (usually the hero image at the top of the page).
2. Elevate LCP priority: Add fetchpriority="high" to the <img> element for the LCP candidate.
3. Deprioritize non-critical images: For images that are part of a secondary UI or are only revealed after user interaction (like mega menus, modals, or off-screen carousel slides), add fetchpriority="low".
4. Optimize lazy loading: Never use loading="lazy" on the LCP image. For standard below-the-fold images, loading="lazy" is sufficient to defer the request until the user scrolls near them. Avoid adding fetchpriority="low" to these images, as you want them to load at normal priority once the user scrolls to them. Reserve fetchpriority="low" for images that are technically "above the fold" but not initially visible (e.g., hidden carousel slides or mega menus). For these hidden images, it is acceptable to use loading="lazy" as well; the browser will handle the request timing while respecting the low priority.
5. Prefer default priorities: If an image should have normal loading priority, omit the fetchpriority attribute entirely rather than setting it to auto. This is a stylistic convention to keep your HTML cleaner while relying on the browser's native heuristics.

Example code

<!-- Elevate priority for the LCP image -->
<img src="/images/hero-lcp.jpg"
     alt="Main Banner"
     fetchpriority="high"
     width="800" height="400">

<!-- Deprioritize initially hidden images above the fold -->
<!-- Additionally use `loading="lazy"` if there are likely to be many images-->
 <div class="carousel">
     <img src="/images/gallery-alt.jpg"
          alt="Gallery Image 1"
          width="400" height="300">
     <img src="/images/gallery-alt.jpg"
          alt="Gallery Image 2"
          fetchpriority="low"
          loading="lazy"
          width="400" height="300">
<div>

<!-- Deprioritize images revealed only after user interaction -->
<img src="/images/mega-menu-promo.jpg"
     alt="Special Offer"
     fetchpriority="low"
     width="300" height="150">

<!-- Use lazy loading ALONE for standard below-the-fold images -->
<img src="/images/footer-logo.png"
     alt="Footer Logo"
     loading="lazy"
     width="120" height="60">

<!-- Omit fetchpriority for images with standard priority -->
<img src="/images/standard-image.jpg"
     alt="Standard Image"
     width="400" height="300">

Best practices

• MANDATORY: Always apply fetchpriority="high" to the LCP image.
• MANDATORY: Only use fetchpriority="high" on at most 1-2 critical images to avoid network contention and diluting the priority boost.
• MANDATORY: Use fetchpriority="low" for images that are technically "above the fold" but initially hidden (e.g., hidden carousel slides, mega menu images).
• MANDATORY: Do not use fetchpriority="low" on standard below-the-fold images that are already using loading="lazy". These images should load at normal priority once they enter the viewport.
• RECOMMENDED: Avoid using fetchpriority="auto". If you want the default priority, omit the attribute entirely to keep your HTML clean.
• DO NOT combine fetchpriority="high" with loading="lazy".
• DO NOT use the deprecated importance attribute. It has been replaced by fetchpriority and is not supported by any browser.
• DO NOT use the deprecated loading="auto" value. It was initially supported by Chrome but has been removed and is not supported by any browser.

Fallback strategy

The fetchpriority attribute is a progressive enhancement for the <img> element. If a browser does not support it, the attribute is ignored, and the browser uses its default priority heuristics.