Maximally optimizing image loading for the web in 2021

In this post I'll outline 8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display. I'll present them in the form of an annotated HTML example to make it easy for folks to reproduce the results. Some of these techniques are more established, while others are somewhat novel. Ideally, your favorite mechanism for publishing web documents (like a CMS, static site generator, or web application framework) implements all of these out-of-the-box. I'll keep a list updated at the end of this posts with technologies that provide all of the optimizations outlined here.

Together the techniques optimize all elements of Google's Core Web Vitals by

• Minimizing the Largest Contentful Paint (LCP) through reducing bytes, caching, and lazy loading.

• Keeping Cumulative Layout Shift (CLS) to zero.

• Reducing First Input Delay(FID) through reduced (main-thread) CPU usage.

View the source of this sample image to see all the techniques in action: