How to do lazy loading image with srcset?

Question

I\'m using slick.js to build a carousel. However, even though I change the attribute from src to data-lazy the images still get loaded before I scroll

Answer 1

Usually, to implement lazy loading in HTML, instead of src or srcset attributes, we use data-src or data-srcset so that browser does not load images during speculative parsing. Later on, when Javascript is executed, and the user has scrolled near the image element, we load the actual image and update the src or srcset attribute’s value.

Two very popular lazy loading libraries lazysizes and vanilla-lazyload support responsive images out of the box.

Here are a few examples of using lazysizes.

Lazy loading responsive images in srcset and sizes

Using low quality placeholder in lazy loading

Lazy loading images in picture element

You can learn more about responsive images from this guide - https://imagekit.io/responsive-images