Image Fetch Priority

How urgently the browser should download this image compared with everything else.

Where to find it
Labelled Image Fetch Priority in the "Selected Component" section of the Modify drawer.
Offered by
The Image component. Other components do not have this setting.
Per device
Yes — you can set one value for every screen, or separate values for phone, tablet, and desktop.

In plain English

A browser loading your page is downloading many things at once and has to decide what matters. This setting lets you tell it which image is the important one.

Marking your main hero image as "high" moves it to the front of the queue, ahead of images further down and other secondary files. It typically makes the page feel noticeably faster, because the thing the visitor is looking at arrives sooner.

The effect only works if it is used sparingly. If every image is high priority, none of them are, and you are back to the browser's own judgement. Use it on one image per page.

What each option does

OptionWhat you will see
highDownload ahead of other images. Reserve this for the single most important image on the page.
lowDownload after more important things. Useful for decorative images that can arrive whenever.
autoLet the browser decide. The default, and correct for almost every image.

When you would use it

  • The hero image at the top of a landing page: choose "high".
  • A background texture or decorative flourish: choose "low".

How to change it

  1. Click the image component on the canvas.
  2. In the Modify drawer, open "Selected Component", then "Image Fetch Priority".
  3. Choose "high", "low", or "auto".
One value, or one per device? Every input in this setting sits under a “Same value for all resolutions” checkbox. Leave it checked for a single value everywhere, or uncheck it to give phones, tablets, and desktops their own. How per-device values work.

Watch out for

  • Only one image per page should be "high". Marking several cancels out the benefit.
  • This setting is only meaningful for an image that loads eagerly. A lazy image is not in the queue to be prioritised.

Related settings

For developers

The technical reference for what this setting produces: MDN: the fetchPriority attribute. You do not need any of it to use the setting — it is there for whoever is building the components or debugging the published page.

Where to go next