DEV Community

Cover image for How to Lazy Load Images

How to Lazy Load Images

Prasanna Shandilya on February 22, 2020

What is lazy loading images? Lazy loading is a technique that defers the loading of non-critical resources at page load time. Instead, these res...
Collapse
 
andersclark profile image
Anders Clark

Great intro-post for us that's never implemented lazy loading.
For the future it would be best of you did something similar for loading thumbnails/compressed/blurred images before real ones for performance.

Collapse
 
patarapolw profile image
Pacharapol Withayasakpunt

How is this library? github.com/aFarkas/lazysizes

Collapse
 
shandilyaprasanna profile image
Prasanna Shandilya

lazysizes is a good well-documented library, I have personally never used it.
there are other library options as well:-
->blazy
->lozad.js
->react-lazyload

The motive of this article was to show how lazy load works under the hood. Otherwise, you can always grab a library and call it a day.

Collapse
 
shandilyaprasanna profile image
Prasanna Shandilya

Thanks for sharing your experience.