Enable lazy loading of your images natively without Javascript!

Lazy loading is a practice that consists of loading a resource (not necessarily an image, but also a script, CSS, etc.) only when the user needs it.

The benefit of this practice lies in its savings in network calls, which results in a faster initial page load, but also in bandwidth savings on the server side.

Loading the right resources at the right time first means not loading unnecessary resources, therefore not loading resources that are invisible on screen (such as images, for example).

Depending on the experience you want to offer visitors, some resources may nonetheless be preloaded before being displayed—it's up to you to decide.

Until now, lazy loading was carried out using various fairly simple-to-use JavaScript libraries, but a newcomer is here to make your life easier!

The HTML "loading=lazy" attribute

Available for some time now in the HTML standard, the "loading" attribute lets you specify the loading mode for images as well as iframes, and is now available in most modern browsers.

Firefox, Chrome, and Edge all support the attribute for images, and implementation in Safari is underway, but a polyfill is available on GitHub: "loading-attribute-polyfill"

How it works

The "loading" attribute can take two different values:

• lazy
• eager (default)

The "lazy" mode will therefore load the image starting from the moment it appears in the viewport, while the "eager" mode will force the image to load as soon as the page loads.

All you need to do is add the attribute to your image as shown below, and your image will only load once it appears on screen:

<img src="..." alt="..." loading="lazy"/>

As a bonus: by increasing your pages' loading speed, lazy loading has a positive effect on SEO!