HTML fetchpriority Attribute

The HTML fetchpriority attribute provides the browser with a hint about the relative priority it should use when fetching a resource. It can indicate that a resource should receive higher or lower priority than the browser would normally assign to it.

Syntax

The fetchpriority attribute is assigned one of three values: high, low, or auto.

<img src="photo.jpg" alt="Example" fetchpriority="high">

The attribute provides a hint to the browser and does not guarantee that the resource will be fetched at a particular priority.

Attribute Values

The fetchpriority attribute is an enumerated attribute with three supported values.

Value	Description
`high`	Hints that the resource should be fetched at a higher priority relative to other resources of the same type.
`low`	Hints that the resource should be fetched at a lower priority relative to other resources of the same type.
`auto`	Uses the browser's normal priority determination. This is the default state.

If the attribute is omitted or contains an invalid value, the auto state applies.

Elements That Use the fetchpriority Attribute

The fetchpriority attribute can be used with the <img>, <link>, and <script> elements when they fetch applicable external resources.

Element	Description
`<img>`	Provides a priority hint for fetching an image.
`<link>`	Provides a priority hint for resources fetched by applicable link relationships, such as preloaded resources.
`<script>`	Provides a priority hint for fetching an external script.

The high Value

The high value suggests that the browser fetch the resource at a higher priority than it might otherwise use relative to similar resources.

<img src="hero-image.jpg"
     alt="Mountain landscape"
     fetchpriority="high">

This can be useful for an important image that appears immediately when the page loads and is likely to contribute significantly to the initial visual content.

The low Value

The low value suggests that the browser fetch the resource at a lower priority relative to similar resources.

<img src="decorative-image.jpg"
     alt=""
     fetchpriority="low">

This can be useful for resources that are less important to the initial page experience and should not compete as strongly with more important resources.

The auto Value

The auto value allows the browser to determine the appropriate fetch priority using its normal resource-loading behavior.

<img src="photo.jpg" alt="Example" fetchpriority="auto">

Because auto is the default state, explicitly writing it is usually unnecessary.

Prioritizing Images

One common use of fetchpriority is to provide a higher priority hint for an important image near the top of a page.

<img src="hero.jpg"
     alt="Featured landscape"
     width="1200"
     height="600"
     fetchpriority="high">

Less important images can use fetchpriority="low", although the attribute should be used selectively rather than assigning explicit priorities to every image on a page.

Using fetchpriority with Preload

The fetchpriority attribute can also provide a priority hint for a resource referenced by an applicable <link> element.

<link rel="preload"
      href="hero.jpg"
      as="image"
      fetchpriority="high">

The rel="preload" value tells the browser to discover and fetch the resource early, while fetchpriority="high" provides an additional hint about its relative fetch priority.

Common Mistakes

Do not use fetchpriority="high" on every resource. If too many resources are marked as high priority, they compete with each other and reduce the usefulness of the hint.

Do not assume that fetchpriority forces the browser to use a specific network priority. It is a hint, and the browser remains responsible for determining how resources are scheduled.

Do not confuse fetchpriority with lazy loading. The loading attribute affects when certain resources are loaded, while fetchpriority provides a relative priority hint for fetching a resource.

Browser Support

Baseline: Newly available indicates that a feature is supported in the latest stable version of each of the core browsers. Most users can use these features reliably, but they may not work in older browser versions.

The fetchpriority attribute is supported in the latest core browser versions, but older browsers may not recognize it. Compatibility can also vary by the element where the attribute is used.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the fetchpriority Attribute

The example loads two images with different priority hints. The browser can use these hints when determining the relative priority of the image requests.

Play in Editor

Summary

The HTML fetchpriority attribute provides a hint about the relative priority the browser should use when fetching a resource. The high value suggests greater priority, low suggests lower priority, and auto leaves priority determination to the browser. The attribute can be useful for important images, scripts, and resources referenced by applicable <link> elements, but priority hints should be used selectively.