Thoughts on lazy loading images

“Lazy loading” images means a web page is being lazy about loading image files: it delays loading them until they are actually required – which means, only when they are viewed or about to be viewed by the visitor.

The benefits of this pattern are to make the page load fully faster and to save data by not sending unnecessary bytes when they are actually never required.

It’s a quite popular feature – especially on photo blogs. In the past, this required Javascript to make it work. But recently, the loading attribute on the img element started to get implemented in browsers – first in Chrome, and now in Firefox – which adds native support via a simple HTML attribute.

This made me try out this pattern for my personal sites.

I didn’t use it in the past, because I do not like to require Javascript for my personal websites. And even though this could have been added with progressive enhancement in mind (making use of the <noscript> element), it never felt worth the hassle. Especially considering that this could not only be seen as a feature, but also as a bug:

Because I think there’s a strong use case where a visitor might want to open a page (in the background) and wait for it to fully load before actually consuming it. For example, when you’re on a slow(er) connection: because you know you very likely need to wait for it to load. Or you might want preload it for a location where you’re going to be offline (think flights, or travel to an area without reception). In these cases, you would do the users a disservice using lazy loading, because this “preloading” would not work.

While I don’t think my sites are so important or widely read that they qualify for these scenarios, I still like to consider them.

However – and nevertheless – what I do like about lazy loading images, are its previously stated features: that pages load quicker and only the required data is being sent. Especially for my photo journal site, where each post can have a large number of images. And when you open a page, but then end up not going through it completely, a large amount of data could be saved.

I think for both the use case where you simply browse a page and/or you are on a metered connection, this will benefit the user by limiting the amount of unnecessarily-sent data. And that’s why I recently enabled it here and on the photo journal. So far, I like it (more Chrome’s than Firefox’s implementation, though).

But I feel native lazy loading would almost warrant its own browser preference, which could give users the option to disable it, because of the aforementioned disadvantages.

And maybe the safest and best usability option would be to use it in conjunction with a service worker and offer a piece of UI on each page to enable the user to “save this page for offline use”. Then I think you could have considered all use cases, have eliminated the drawbacks, and could simply benefit from its upsides.