Home / Displaying data / Lazy image and iframe loading using pure HTML

Lazy image and iframe loading using pure HTML

Displaying data

January 29, 2022 0

Last updated: September 27, 2022.

What is lazy loading?

In case you are unfamiliar with it, lazy loading is a feature of web development that makes page loading more efficient by deferring the loading of images until a user scrolls near to them (visible images upon accessing the page are not deferred).

The numerous benefits of lazy loading

If lazy loading is enabled, this means that a user’s browser does not load an image unless that user scrolls near to it.

At the user-end, this increases initial page-loading speed because fewer external resources are loaded initially. On the server-side, there is less demand because only image that are viewed are loaded.

Lazy loading is especially useful for enhancing the web experience of users with slower internet connections.

It even helps with SEO: Google now uses page loading speed as a direct ranking factor.

Lazy loading with pure HTML

Until now, lazy loading has required solutions that involve JavaScript event listeners for scroll, orientationChange and resize browser events or using JavaScript to access the Intersection Observer API, which detects when an element enters a user’s viewport.

But now you can do all of that functionality by simply adding the loading HTML attribute to your images and setting its value to lazy:

<img src="myImage.png" alt="Image description" loading="lazy">

There are three valid values for the loading attribute:

lazy: deferred loading until an image is close to visible within a user’s viewport
eager: loads immediately
auto: lets the browser determine whether to lazy load an image or not

Native HTML example

To see lazy loading in action, click here for a very long lorem ipsum text followed by an image with the loading="lazy" attribute.

To see what is going on under the hood, open inspect element and select the network tab. Within network, view image network requests. If you want to simulate the experience for a user with a slow internet connection, add some throttling.

Before scrolling, you will see no images have been loaded by the browser:

Now, when scrolling to around halfway down the page, the lazily loaded image is finally loaded by the browser (though it is still not visible):

Lazy loading example: After scrolling to halfway down the page — Lazy loading example: scrolling to around halfway down the page

This means that by the time the image is in view, it is fully loaded.

Notice that the browser started loading the image far in advance of it appearing in the viewport.

This is a feature of HTML native lazy loading: it is conservative in order to not affect user experience. In the vast majority of cases, users won’t arrive at an image before it is fully loaded:

Lazy loading example: The image has loaded before entering the viewport — Lazy loading example: By the time the image comes into view, it has already full loaded

For full disclosure: this example was run in Chrome and Edge with similar result without any throttling applied. Results were similar in both.

Browser support

A stumbling block for the widespread adoption of native HTML lazy loading up until now has been a concern about universal browser support.

But it is now supported in Chrome, Firefox, Edge, Opera and even IE. The browser of concern for a long time was Opera, but its release version 135 (November 2021) now comes with lazy loading by default.

What if a user is using an older browser version?

In this case, enabling native HTML lazy loading won’t be a show-stopper. The browser will simply ignore the HTML attribute and continue with its default behavior for loading any images.

Lazy loading with iframes

Lazy loading works with iframes too! Just set the loading attribute to lazy in the same way as for images:

<iframe src="myIframe.html" title="myIframe" loading="lazy">

Summary

Lazy loading is a great piece of web technology that can improve user experience by speeding up page loading, reduce server demands and even increase your website’s ranking in search engines – especially if your site is media-rich.

While there have been creative JavaScript solutions to create lazy loading up until now, the modern cross-browser compatibility of native HTML lazy image loading means the time has come to simplify your workflow by relying on the browser for default lazy loading behavior.