Best way to lazy load images for maximum performance

Lazy loading is important for optimizing image loading and therefore improving web performance. This article covers how to implement native lazy loading with fallback for unsupported browsers.

Image lazy loading is one of the more popular approaches of optimizing websites due to the relatively easy implementation and large performance gain. With lazy loading we load images asynchronously, meaning that we load images only when they appear in the browser's viewport.

Almost a year ago, native lazy loading for images and iframes was released for Chrome and other major browsers. The point of the feature is to give browsers control when to request an image or iframe resource, which makes dev jobs a bit easier. Up to that point, only option was to use various JavaScript plugins which monitored the viewport changes and loaded resources dynamically. Now browsers can do that natively!

At the time of writing this article, around 73% of currently used browsers support this feature which is not bad, but we don't want to make the website image content inaccessible and unusable to 27% of potential users.

So this puts us in an interesting situation:

• We want to use the benefits of native lazy loading for browsers that support it
• We want to use a JS plugin as fallback for lazy loading for browsers that don't support it
• We don't want to load the lazy loading JS plugin if the browser supports native lazy loading.