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.
Lazy Load Images feature makes this a very simple strategy to
This feature uses
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
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
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