Using fetchpriority='high' for Critical Images

The fetchpriority Attribute for Images

The fetchpriority attribute gives browsers a hint about the relative importance of an image fetch, helping prioritize critical images.

Basic Usage

<!-- Hero image: high priority -->
<img src="hero.webp" fetchpriority="high" alt="Hero" />

<!-- Decorative sidebar image: low priority -->
<img src="decoration.webp" fetchpriority="low" alt="" loading="lazy" />

Priority Values

Value	When to Use	Browser Behavior
high	LCP images, hero banners	Fetched before other images
low	Decorative, below fold, carousels	Fetched after higher priority resources
auto (default)	Most images	Browser decides based on position

Combining with Responsive Images

<picture>
  <source
    type="image/avif"
    srcset="hero-640w.avif 640w, hero-1280w.avif 1280w"
    sizes="100vw"
  />
  <img
    src="hero-1280w.jpg"
    srcset="hero-640w.jpg 640w, hero-1280w.jpg 1280w"
    sizes="100vw"
    alt="Hero"
    fetchpriority="high"
    loading="eager"
    decoding="async"
  />
</picture>

Impact on LCP

In Google's tests, adding fetchpriority="high" to the LCP image improved LCP by 400-1200ms on typical pages. This is because without the hint, the browser may deprioritize the image in favor of render-blocking CSS and JavaScript.

Important Notes

• Only use fetchpriority="high" on 1-2 images per page — if everything is high priority, nothing is
• The attribute is placed on the <img> tag, not on <source> elements
• fetchpriority works with both loading="eager" and loading="lazy", but pairing high with lazy is contradictory
• Browser support: Chrome 101+, Edge 101+, Safari 17.2+, Firefox 132+