Skip to content

re: How to Lazy Load Images VIEW POST


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.

code of conduct - report abuse