diff --git a/_config.yml b/_config.yml
index f91271f93931..449cba02b6a7 100644
--- a/_config.yml
+++ b/_config.yml
@@ -358,6 +358,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
 # -----------------------------------------------------------------------------
diff --git a/_includes/figure.liquid b/_includes/figure.liquid
index 48ff465d88a2..0cbff9101315 100644
--- a/_includes/figure.liquid
+++ b/_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>