Lazy loading is the approach of waiting to load resources until they are needed, rather than loading them in advance. This can improve performance by reducing the amount of resources that need to be loaded and parsed on initial page load.

Images that are offscreen during the initial pageload are ideal candidates for this technique. The Lazy Load Images feature makes this a very simple strategy to implement.

Lazy Load Images

This feature uses lazysizes to lazy load images. Enabling Lazy Load Images automatically adds the lazysizes scripts to the page, and they are combined separately in one file with the async attribute added to prevent render-blocking. The class jch-lazyload is then added to images that should be lazy loaded and in addition, the existing src attribute is changed to data-src. To maintain HTML validity, an src is added containing a base 64 encoded blank SVG image embedded inline using a data URL. The SVG image is of the same aspect ratio of the original image to minimize reflow and re-layout when the original image eventually gets loaded.

 <img class="jch-lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNzMiIGhlaWdodD0iNjAiPjwvc3ZnPg==" data-src="images/flower3.png" alt="" width="173" height="60">
                        

Whenever the image scrolls into view, the blank SVG image is replaced by the original image from the data-src attribute.