chore: lazy load content images

10 files changed, 28 insertions, 19 deletions

diff --git a/layouts/partials/blog/cross-site-post.html b/layouts/partials/blog/cross-site-post.html
index 3a13af8..2a9f77b 100644
--- a/layouts/partials/blog/cross-site-post.html
+++ b/layouts/partials/blog/cross-site-post.html
@@ -16,15 +16,16 @@
   {{- $img2x := $img.Resize "64x webp" }}
   <div class="img">
   <a href="{{ .Permalink }}"><img
-    alt="Arrow"
-    src="{{ $img1x.Permalink }}" 
-    srcset="
-            {{ $img1x.Permalink }} 1x,
-            {{ $img2x.Permalink }} 2x
-            "
-    width="{{ $img1x.Width }}" 
-    height="{{ $img1x.Height }}"
-    ></a>
+                               alt="Arrow"
+                               loading="lazy"
+                               src="{{ $img1x.Permalink }}" 
+                               srcset="
+                                       {{ $img1x.Permalink }} 1x,
+                                       {{ $img2x.Permalink }} 2x
+                                       "
+                               width="{{ $img1x.Width }}" 
+                               height="{{ $img1x.Height }}"
+                               ></a>
   </div>
   <div class="text">
     <time datetime="{{.PublishDate.Format "2006-01-02" }}">
@@ -33,5 +34,5 @@
     I published 
     <a href="{{ .Permalink }}">"{{ .Title }}"</a>
     on {{ $section }}
-    </div>
+  </div>
 </article>
diff --git a/layouts/partials/button-15.html b/layouts/partials/button-15.html
index b715d2a..a155f05 100644
--- a/layouts/partials/button-15.html
+++ b/layouts/partials/button-15.html
@@ -5,7 +5,8 @@
 {{- $img2x := $img.Resize "160x30 webp q90"}}
 
 {{- if $.href }} <a href="{{ $.href }}"> {{ end }}
-    <img 
+  <img
+    loading="lazy"
       class="webbutton"
       alt="{{ $.alt }}"
       src="{{ $img1x.Permalink }}" 
diff --git a/layouts/partials/button-31.html b/layouts/partials/button-31.html
index 7349c88..305912a 100644
--- a/layouts/partials/button-31.html
+++ b/layouts/partials/button-31.html
@@ -5,7 +5,8 @@
 {{- $img2x := $img.Resize "176x webp q90"}}
 
 {{- if $.href }} <a href="{{ $.href }}"> {{ end }}
-    <img 
+  <img
+     loading="lazy"
       class="webbutton"
       alt="{{ $.alt }}"
       src="{{ $img1x.Permalink }}" 
diff --git a/layouts/shortcodes/img-c.html b/layouts/shortcodes/img-c.html
index ff262c7..7411abb 100644
--- a/layouts/shortcodes/img-c.html
+++ b/layouts/shortcodes/img-c.html
@@ -8,7 +8,8 @@
 {{- $img2x := $img.Resize "1600x webp q90"}}
 <figure>
   <a href="{{ $img.Permalink }}">
-    <img 
+    <img
+      loading="lazy"
       class="center {{ $imgclass }}"
       alt="{{ $caption }}" 
       src="{{ $img1x.Permalink }}" 
diff --git a/layouts/shortcodes/img-center.html b/layouts/shortcodes/img-center.html
index 587e2b2..e871a91 100644
--- a/layouts/shortcodes/img-center.html
+++ b/layouts/shortcodes/img-center.html
@@ -6,7 +6,8 @@
 {{- $img1x := $img.Resize "800x webp q90"}}
 {{- $img2x := $img.Resize "1600x webp q90"}}
 <figure>
-  <img 
+  <img
+    loading="lazy"
     class="center"
     alt="{{ $caption }}" 
     src="{{ $img1x.Permalink }}" 
diff --git a/layouts/shortcodes/img-pull-right.html b/layouts/shortcodes/img-pull-right.html
index 3873d81..ad7cbf1 100644
--- a/layouts/shortcodes/img-pull-right.html
+++ b/layouts/shortcodes/img-pull-right.html
@@ -4,7 +4,8 @@
 {{- $img1x := $img.Resize "150x webp" }}
 {{- $img2x := $img.Resize "300x webp" }}
 {{- $caption := .Get 1}}
- <img 
+<img
+  loading="lazy" 
   class="float-right" 
   alt="{{ $caption }}" 
   src="{{ $img1x.Permalink }}" 
diff --git a/layouts/shortcodes/img-r.html b/layouts/shortcodes/img-r.html
index 1791ed7..e67b32f 100644
--- a/layouts/shortcodes/img-r.html
+++ b/layouts/shortcodes/img-r.html
@@ -4,7 +4,8 @@
 {{- $img1x := $img.Resize "150x webp" }}
 {{- $img2x := $img.Resize "300x webp" }}
 {{- $caption := .Inner}}
- <img 
+<img
+  loading="lazy" ; 
   class="float-right" 
   alt="{{ $caption }}" 
   src="{{ $img1x.Permalink }}" 
diff --git a/layouts/shortcodes/imgproc.html b/layouts/shortcodes/imgproc.html
index 115da4d..a9ba008 100644
--- a/layouts/shortcodes/imgproc.html
+++ b/layouts/shortcodes/imgproc.html
@@ -15,7 +15,7 @@
   {{ errorf "Invalid image processing command: Must be one of Crop, Fit, Fill or Resize."}}
 {{ end }}
 <figure>
-  <img class="centered" alt="{{ $caption }}" src="{{ $img.Permalink }}" width="{{ $img.Width }}" height="{{ $img.Height }}">
+  <img loading="lazy" class="centered" alt="{{ $caption }}" src="{{ $img.Permalink }}" width="{{ $img.Width }}" height="{{ $img.Height }}">
 	<figcaption>
     {{ $caption }}
 
diff --git a/layouts/shortcodes/youtube.html b/layouts/shortcodes/youtube.html
index b59cac1..6a2409b 100644
--- a/layouts/shortcodes/youtube.html
+++ b/layouts/shortcodes/youtube.html
@@ -7,7 +7,8 @@
 
 <figure>
   <a href="https://www.youtube.com/watch?v={{$id}}" target="_blank">
-    <img 
+    <img
+      loading="lazy"
       class="center"
       src="{{ $img1x.Permalink }}" 
       srcset="
diff --git a/layouts/shortcodes/yt.html b/layouts/shortcodes/yt.html
index a6298ef..34e04b9 100644
--- a/layouts/shortcodes/yt.html
+++ b/layouts/shortcodes/yt.html
@@ -8,7 +8,8 @@
 
 <figure>
   <a href="https://redirect.invidious.io/watch?v={{$id}}" target="_blank">
-    <img 
+    <img
+      loading="lazy"
       class="center"
       src="{{ $img1x.Permalink }}" 
       srcset="