fetchpriority
A hint about how urgent a resource is compared with others of the same kind — for example, to load the main banner before other images.
Syntax
<img src="hero.jpg" alt="…" fetchpriority="high">Parameters
| Parameter | Type | Description |
|---|---|---|
| fetchpriority | high | low | auto | `high` — load sooner, `low` — later, `auto` — let the browser decide (default). |
Examples
The large banner at the top gets priority, a small decorative image waits:
<img src="/media/photo-800x500.jpg" alt="Our cafe" width="400" height="250" fetchpriority="high">
<img src="/media/photo-200x200.jpg" alt="A cup" width="100" height="100" fetchpriority="low">Notes
Works on <img>, <link>, <script> and <iframe>. The typical use is the largest image on the first screen, which affects how fast the page looks loaded (LCP). Do not set high on everything — then nothing is prioritized. It is a hint, not a command. Supported in all current browsers since 2024.
See also
Related recipes
In the tutorial
- Images — The img tag, the src and alt attributes, sizes, captions with figure and figcaption, image formats and lazy loading.