Lazy Load Images - Two Strategies

History

In the "old" days, we hacked out all sorts of solutions to the age-old issue: how to optimize a web page with many images? Of course, we started by reducing the (file) size of the images. We then created multiple files for a single image so we could utilize the srcset property. And if the site had long lists of items with photos, we turned to paged lists to limit the number of actual images per page. Usually, the savings in load times were so significant from just these strategies that we declared job done !

Today, tools like Lighthouse and PageSpeed Insights have exposed more advanced metrics for measuring "performance". In other words, serving smaller/optimized images is not enough. And relying on UI hacks like paged lists at the cost of user experience is outdated. Instead, we are expanding our idea of best practices for delivering images.

Importance of Image CDNs

The emergence of Image Content Delivery Networks has made life so much easier for developers and content managers. In the past, we spent considerable time (and money) developing software and training solutions to ensure that images were optimized and sized correctly for our sites. Now, images are just uploaded to an image CDN and they handle the optimizations and edge delivery.

That leaves us developers to tackle the optimization of which images are loaded initially and which can be delayed.

Problem Statement

We are strong advocates for starting with a solid problem statement. Whether we are meeting with a client for the first time or just