Implement Default Lazy Loading for Images with Configurable Option

_config.yml

@@ -357,6 +357,15 @@ imagemagick:
   output_formats:
     webp: "-quality 85"
 
+# Lazy loading images
+#   If you enable lazy loading, all images will add the loading="lazy" attribute.
+#   This will make your site load faster, but it may not be supported in all browsers.
+#   You can also set loading="" to other values for specific images to override the default behavior.
+#   Options: "auto", "eager", "lazy"
+#   See https://web.dev/browser-level-image-lazy-loading/ for more information.
+lazy_loading_images:
+  enable: true # enables lazy loading of images (recommended)
+
 # -----------------------------------------------------------------------------
 # Optional Features
 # -----------------------------------------------------------------------------

_includes/figure.liquid

@@ -63,6 +63,11 @@
       {% if include.zoomable %}
         data-zoomable
       {% endif %}
+      {% if include.loading %}
+        loading="{{ include.loading }}"
+      {% elsif site.lazy_loading_images.enable %}
+        loading="lazy"
+      {% endif %}
       onerror="this.onerror=null; $('.responsive-img-srcset').remove();"
     >
   </picture>