Implement Default Lazy Loading for Images with Configurable Option (#…

…2183)

This PR introduces an enhancement to the site's image-loading strategy
by implementing lazy loading as the default behavior for all images. The
motivation behind this change is to improve the site's load times.

**Changes:**
1. **Default Lazy Loading:** By `default`, all images will now have the
`loading="lazy"` attribute.

2. **Configurable Option in `_config.yml`:** Added a new configuration
option under `lazy_loading_images.enable`.

3. **Override Capability:** For `specific images` where the user doesn't
want lazy loading, they can `override` this by directly setting the
`loading attribute` in the `image tag`.

_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>