Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

HTMLImageElement : propriété fetchPriority

Baseline 2024
Newly available

Since ⁨October 2024⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

La propriété fetchPriority de l'interface HTMLImageElement représente une indication pour le navigateur sur la façon de prioriser le chargement d'une image particulière par rapport aux autres images. Elle reflète l'attribut fetchpriority de l'élément HTML <img> correspondant.

Cette propriété permet à un·e développeur·euse d'indiquer que le chargement d'une image spécifique, tôt dans le processus de chargement, a plus ou moins d'impact sur l'expérience utilisateur·ice que ce que le navigateur pourrait déduire en attribuant une priorité interne. Cela permet au navigateur d'augmenter ou de diminuer la priorité, et potentiellement de charger l'image plus tôt ou plus tard qu'il ne l'aurait fait autrement. La propriété doit être utilisée avec parcimonie, car une priorisation excessive ou incorrecte peut dégrader les performances.

La priorité de chargement peut compléter le préchargement, permettant à un·e développeur·euse d'augmenter la priorité par rapport à des ressources moins importantes qui auraient une priorité par défaut plus élevée. Par exemple, si un·e développeur·euse sait qu'une image contribue significativement au rendu du contenu le plus volumineux (LCP) du site, il·elle peut ajouter <link rel="preload"> pour l'image puis augmenter encore la priorité avec la propriété fetchpriority.

Notez que la priorité interne de toute opération de chargement, ainsi que l'impact de fetchPriority sur cette priorité, dépendent entièrement du navigateur.

Valeur

Une chaîne de caractères représentant l'indication de priorité. Les valeurs possibles sont :

high

Charger l'image avec une priorité élevée par rapport aux autres images ayant la même priorité interne.

low

Charger l'image avec une priorité faible par rapport aux autres images ayant la même priorité interne.

auto

Ne pas définir de préférence utilisateur·ice pour la priorité de chargement. C'est la valeur par défaut, utilisée si aucune valeur n'est définie ou si une valeur invalide est définie.

Exemples

js
const img = new Image();
img.fetchPriority = "high";
img.src = "img/logo.png";

Spécifications

Specification
HTML
# dom-img-fetchpriority

Compatibilité des navigateurs

Voir aussi