When to Use fetchpriority=”high” vs loading=”lazy” for Images

This article provides additional guidance on when to use the fetchpriority and loading image attributes. For a complete overview of the Resource Loading feature, including setup instructions and all available options, please see the main documentation article.

Both attributes influence how the browser loads images, but they serve very different purposes. Understanding the difference will help you improve page speed and Largest Contentful Paint (LCP) without sending conflicting instructions to the browser.

In most cases, you should use one or the other, not both!

Quick Navigation

fetchpriority="high"

↑ Back to top

Use this attribute for images that are critical to the initial page render, especially the image most likely to become the Largest Contentful Paint (LCP) element.

 Typical Use Cases

  • Hero images above the fold
  • Main product images
  • Featured article images
  • Important banners

Example

<img src="/hero.jpg" fetchpriority="high" alt="">

What It Does

Tells the browser:

This image is important. Download it as early as possible.

Best Practice

Use fetchpriority="high" sparingly — usually on one key image per page. Applying it to too many images can reduce its effectiveness.

loading="lazy"

↑ Back to top

Use this attribute for images that are not immediately visible when the page first loads.

 Typical Use Cases

  • Images below the fold
  • Gallery thumbnails
  • Blog post images further down the page
  • Footer logos

 Example

<img src="/gallery-image.jpg" loading="lazy" alt="">

What It Does

Tells the browser:

Delay loading this image until it gets close to the viewport.

Best Practice

Use lazy loading for non-critical images to reduce initial page load time and save bandwidth.

Why These Attributes Usually Should Not Be Combined

↑ Back to top

These attributes often send conflicting instructions:

  • fetchpriority="high" → Load this image as soon as possible.
  • loading="lazy" → Delay loading until the image is near the viewport.

Conflicting Example

<img src="/hero.jpg" fetchpriority="high" loading="lazy" alt="">

This combination is generally not recommended.

Use it only if you fully understand why both attributes are needed and have tested the page thoroughly.

Rare Advanced Use Cases

In certain advanced scenarios, combining both attributes may make sense.

Example: Hidden Slider Images

A slider near the top of the page may contain multiple images:

  • Only the first slide is visible initially.
  • Other slides are hidden.
  • The user may interact with the slider immediately.

In such a case, you might choose: 

<img src="/slide-2.jpg" loading="lazy" fetchpriority="high" alt="">

This tells the browser to lazy load the image while also prioritizing it once it becomes eligible for loading.

Asset CleanUp Recommendation

↑ Back to top

For most websites:

  • Use fetchpriority="high" for the main above-the-fold image.
  • Use loading="lazy" for images below the fold.
  • Avoid combining both attributes unless you have a specific, tested use case.

Quick Comparison

↑ Back to top

Attribute Purpose Best Used For
fetchpriority="high" Increases download priority Critical above-the-fold images
loading="lazy" Delays loading until needed Non-critical below-the-fold images

Rule of Thumb

↑ Back to top

If the image is important for the first screen, use: 

fetchpriority="high"

If the image is not visible immediately, use: 

loading="lazy"

If you believe you need both:

Use them together only if you have tested the page carefully and understand the intended behavior.

Was this post helpful?