How to lazy load images for faster load times with no negative SEO impact.
TLDR : Just go to bottom and grab the code snippet.
Lazy Loading With lazySizes JS
lazySizes is one of the most feature rich yet lightweight lazy loading library out there on the internet. Written in VanillaJS, it is 3.7 KB gzipped and 6.6 KB in size. It’s support for picture element allows you to use it with webp images. It also allows specifying responsive sizes. It leverages Intersection Observer (if browser supports) out of the box. This means images are loaded as the user scrolls down. You can even use it with iframes to lazy load Youtube videos.
Basic Lazy Loading
Getting lazy loading to work with lazySizes is simple - just include the JS library on your page, add ‘lazyload’ class to your images and add data-src attributes to point to the images that lazySizes should lazy load:
Lazy Loading Responsive Images
If you want to lazy load images based on the size of device screen, use the data-srcset attribute exactly the way you would you srcset attribute:
Lazy Loading Modern Image Formats (like WebP)
lazySizes works with picture elements as well. This means, you can use it to lazyLoad modern image formats like WebP for browsers that support it with a fallback to JPG/ PNG. Here’s how:
The above code snippet shall lazy load responsive images in the right image format that client browser supports. Note that, in switching from <img> to <picture>, we also changed the way we specify what image to pick for what width.
SEO Friendly Image Loading with noscript
Combining It All
Combining the details listed above can yield an image loading solution that is fast, SEO friendly and browser compatible.