Native lazy loading for images

An excellent new attribute has been added that will avoid a series of problems of loading. For example, you are in a scrolling SPA (Single Page Application) with many background images. The browser will gradually download them when it needs. I’m talking about native lazy loading for images and usually heavy content on a website. To achieve this effect, nothing more than the following attribute on the <img> tag is enough.

<img loading="lazy">

If you wonder why this is necessary, the answer is that images have always been the type of resource that engages more connections in a website. This compared to textual resources like js / css / html, for example.

The browser will decide the distance from the viewport according to various parameters. We will load the images exactly when needed. Some of the parameters are for example the type of image resource or the type of connection used by the browser.

We have the full compatibility of this attribute reserved for Chromium-powered browsers (Chrome, Edge, Opera) and Firefox only. Safari currently requires “manual” activation, in Settings under the “Safari > Advanced > Experimental Features” menu.
To check the updated compatibility, even long after this article came out, you can refer to this link: https://caniuse.com/loading-lazy-attr

Even if the browser did not recognize the new attribute it would ignore it so there is no need to worry about old browsers like IE or old browser versions.
If you want to necessarily support old browsers you can use the following code excerpt:

if ('loading' in HTMLImageElement.prototype) {
  // supported in browser
} else {
  // fetch polyfill / third-party library
}

Useful tips for native lazy loading

Here are some useful tips for using :

1. it is not recommended to use the loading="lazy" attribute on all the images of the site, without taking into account which of these must be loaded immediately because it is present in the viewport.
2. I recommend to always enter the dimensions of the images that we will load in order not to run into problems of redistribution of the page contents, also due to lazy loading. This effect is one of the problems to avoid, the so-called CLS (Cumulative Layout Shift), and is part of the Core Web Vitals metrics.

That’s all with native lazy loading for images.

Try it at home!