Native Lazy Loading Images

What is ‘lazy loading’?

When building websites, we’re always conscious of page weight, in terms of how much data the browser needs to load in order to display a page to the user.

The heaviest elements on a page are usually images, for example if you had 10 1mb images on your page, the browser would need to download 10 x 1mb (10mb) of data. Even if the user never even scrolls to the part of the part where these images are, the browser will still download them all.

This is an issue from a performance perspective, and also for users browsing your site on 3G / 4G connections, you’re burning up their data unnecessarily and slowing down their experience.

To counter this issue, there are a number of ways of telling the browser to defer loading a particular image, until the user scrolls to it, usually using javascript.

In the example above, you can see the 3 images loading as we scroll down, as represented by the green markers on the timeline, rather than everything coming in at the same time at the point of page load.

So what’s new?

As of Google Chrome 75+, we can natively lazy load images, with just one html attribute, no javascript required.

This is simply done by adding loading="lazy" to your image element.

<img src="img/imagename.jpg" loading="lazy" alt="I'm a lazy loading image" />

This is currently enabled using a flag, however hopefully it’ll be a default feature very soon. Currently we can turn it on via chrome://flags/#enable-lazy-image-loading

What’s the big deal?

Although normal users won’t currently benefit due to this behind hidden behind a flag in Google Chrome, we hope it’ll come into production very soon and do away with the overly complex methods currently being used throughout the web, further streamlining website code and meaning even less data download and bandwidth usage. The is good news for everyone. 😁

Jason Nye