Image Loading

Whether the image downloads immediately or waits until the visitor scrolls near it.

Where to find it
Labelled Image Loading 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 page with twenty images does not need all twenty before the visitor can read the first paragraph. Setting an image to "lazy" tells the browser to leave it alone until the visitor scrolls somewhere near it, which frees up the connection for the things they can actually see.

There is one image you must never make lazy: the main one at the top of the page, the one visible before any scrolling. That picture is often what the browser measures your page speed by, and telling it to wait delays the very thing you want to arrive first. Leave that one as "eager".

The simple rule: the first image on the page is eager, and everything below the fold is lazy.

What each option does

OptionWhat you will see
eagerDownload straight away. The right choice for the hero image and anything visible without scrolling.
lazyWait until the visitor scrolls near it. The right choice for everything further down the page.

When you would use it

  • Images in the lower half of a long page: choose "lazy".
  • The hero image at the top: leave it "eager".

How to change it

  1. Click the image component on the canvas.
  2. In the Modify drawer, open "Selected Component", then "Image Loading".
  3. Choose "lazy" or "eager".
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

  • Never set "lazy" on the main image at the top of the page. It is the most common self-inflicted page-speed problem there is.
  • Lazy images in a carousel or slider can appear blank for a moment as the visitor moves through it.
  • Pair this with Image Fetch Priority: the hero image should be eager and high priority, everything else lazy.

Related settings

For developers

The technical reference for what this setting produces: MDN: the loading 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