Baseline 2024
Newly available
The fetchPriority property of the HTMLImageElement interface represents a hint to the browser indicating how it should prioritize fetching a particular image relative to other images. It reflects the fetchpriority attribute of the corresponding <img> element.
The property allows a developer to signal that fetching a particular image early in the loading process has more or less impact on user experience than a browser can reasonably infer when assigning an internal priority. This in turn allows the browser to increase or decrease the priority, and potentially load the image earlier or later than it would otherwise. The property should be used sparingly, as excessive or incorrect prioritization can degrade performance.
The fetch priority can be used to complement preloading, allowing a developer to boost the priority ahead of less-impactful resources that have a higher default priority. For example, if a developer knows that a particular image significantly contributes to the website's Largest Contentful Paint (LCP) they could add <link rel="preload"> for the image and then further boost the priority using the fetchpriority property.
Note that both the internal priority of any fetch operation, and the impact of fetchPriority on the priority, are entirely browser dependent.
A string representing the priority hint. Possible values are:
high
Fetch the image at a high priority relative to other images with the same internal prioritization.
low
Fetch the image at a low priority relative to other images with the same internal prioritization.
auto
Don't set a user preference for the fetch priority. This is the default. It is used if no value is set or if an invalid value is set.
const img = new Image();
img.fetchPriority = "high";
img.src = "img/logo.png";
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3