Lazy Loading Images Natively in the Browser

Natively lazy-load images in modern browsers.

930 views

By. Jacob

Edited: 2019-12-07 09:03

I recently noticed a neat feature in Chrome that allows us to lazy-load images. In version 76 and later, this feature should be enabled by default.

The purpose oc lazy loading is to defer the loading of images on a page until they appear on a users screen, saving bandwidth for both the user and the server.

To test out lazy loading, simply include the loading attribute on your img elements to loading="lazy".

On an image in HTML, this would look like this:

<img src="some-image-file.webp" alt="lazy loading example" loading="lazy" height="200px" width="200px">

Note. Including a width and a height attribute prevents the content from re-flowing once the image start to load.

Possible values are as follows:

• auto – Default (same as not including the attribute.)
• lazy – Images will only load when they appear on the screen.
• eager – Images will be loaded as fast as possible.

It should also work on iframe elements, but you may of course want to avoid using frames, as they are rarely the right solution. Consider using AJAX or server-sided code instead of iframes.

It should also be noted that lazy-loading works best on mobile devices, many desktop users find the behavior disturbing to their browsing experience.

There are still no plans to add this feature to FireFox, and it also does not seem like Safari supports it, so you will need to use a polyfill.