DEV Community

Discussion on: How to Lazy Load Images

aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan • Edited

I added lazy loading to my Jekyll blog a couple weeks ago, and the results were immediately noticeable. Now most of my pages get a solid 100 on PageSpeed Insights.

I wrote a Python script, thumb, that lets me quickly generate scaled-down thumbnails of each image in my assets folder. These are about 1 KB each and serve as fuzzy/blurry placeholders. I then use the IntersectionObserver API to replace the blurry images with the actual image.

On top of all that, I'm also using WebP with fallbacks and generating WebP copies for all of my images in one go with another Python script, webp, that basically just wraps around the cwebp and gif2webp CLI tools that Google ships.

shandilyaprasanna profile image
Prasanna Shandilya Author

Thanks for sharing your experience.