Native lazy loading for images

html native lazy loading

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:

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!

Be the first one to like this.
Please wait...

4 thoughts on...
  1. Awesome article. Really looking forward to read more. Really Great. Kyle Brandon Wetzel

  2. There as noticeably a bundle to find out about this. I assume you made certain nice factors in features also. Bonnie Raymund Rube

  3. Everything is very open with a really clear description of the issues. It was definitely informative. Your site is useful. Many thanks for sharing. Adele Tammy Garcia

  4. Very nice post. I just stumbled upon your weblog and wished to say that I have truly enjoyed browsing your blog posts.

Leave a Reply

Thanks for choosing to leave a comment.
Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published.
Please do NOT use keywords in the name field. Let's have a personal and meaningful conversation.