From adf7f6f224caa30e0696ca5b7d5ac294229abc99 Mon Sep 17 00:00:00 2001
From: Tomy Hsieh <git@tomy.me>
Date: Sat, 27 May 2023 05:26:57 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20Lazy=20load=20image=20in=20?=
 =?UTF-8?q?all=20places?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layouts/_default/_markup/render-image.html | 4 ++--
 layouts/_default/single.html               | 1 +
 layouts/partials/article-link.html         | 1 +
 layouts/partials/author.html               | 1 +
 layouts/partials/home/profile.html         | 1 +
 layouts/partials/logo.html                 | 1 +
 layouts/shortcodes/figure.html             | 1 +
 layouts/shortcodes/screenshot.html         | 1 +
 8 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 2b5974d0..83ecf482 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -3,7 +3,7 @@
 {{ $caption := .Title }}
 {{ if findRE "^https?" $url.Scheme }}
   <figure>
-    <img class="mx-auto my-0 rounded-md" src="{{ $url.String }}" alt="{{ $altText }}" />
+    <img class="mx-auto my-0 rounded-md" src="{{ $url.String }}" alt="{{ $altText }}" loading="lazy" />
     {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
   </figure>
 {{ else }}
@@ -38,7 +38,7 @@
     </figure>
   {{ else }}
     <figure>
-      <img class="mx-auto my-0 rounded-md" src="{{ $url.String }}" alt="{{ $altText }}" />
+      <img class="mx-auto my-0 rounded-md" src="{{ $url.String }}" alt="{{ $altText }}" loading="lazy" />
       {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
     </figure>
   {{ end }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 70e8fe88..06ee2dfd 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -31,6 +31,7 @@
               {{ end }}
             {{ end }}
             alt="{{ $.Params.featureAlt | default $.Params.coverAlt | default "" }}"
+            loading="lazy"
           />
           {{ with $.Params.coverCaption }}
             <figcaption class="mb-6 -mt-3 text-center">{{ . | markdownify }}</figcaption>
diff --git a/layouts/partials/article-link.html b/layouts/partials/article-link.html
index 330cc07f..93c24b18 100644
--- a/layouts/partials/article-link.html
+++ b/layouts/partials/article-link.html
@@ -23,6 +23,7 @@
             160w, {{- (.Fill "320x240 smart").RelPermalink }} 2x"
             src="{{ (.Fill "160x120 smart").RelPermalink }}"
           {{ end }}
+          loading="lazy"
         />
       </a>
     </div>
diff --git a/layouts/partials/author.html b/layouts/partials/author.html
index d482d3a6..5aae1f8d 100644
--- a/layouts/partials/author.html
+++ b/layouts/partials/author.html
@@ -10,6 +10,7 @@
           height="96"
           alt="{{ $.Site.Author.name | default "Author" }}"
           src="{{ $authorImage.RelPermalink }}"
+          loading="lazy"
         />
       {{ end }}
     {{ end }}
diff --git a/layouts/partials/home/profile.html b/layouts/partials/home/profile.html
index 93ce2462..ca465a23 100644
--- a/layouts/partials/home/profile.html
+++ b/layouts/partials/home/profile.html
@@ -14,6 +14,7 @@
           height="144"
           alt="{{ $.Site.Author.name | default "Author" }}"
           src="{{ $authorImage.RelPermalink }}"
+          loading="lazy"
         />
       {{ end }}
     {{ end }}
diff --git a/layouts/partials/logo.html b/layouts/partials/logo.html
index ee119168..4c669a57 100644
--- a/layouts/partials/logo.html
+++ b/layouts/partials/logo.html
@@ -9,6 +9,7 @@
         height="{{ div $logo.Height 2 }}"
         class="max-h-[10rem] max-w-[10rem] object-scale-down object-left{{ if $logo_dark }} hidden dark:flex{{ end }}"
         alt="{{ .Site.Title }}"
+        loading="lazy"
       />
       {{- if $logo_dark }}
       <img
diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html
index 9b013442..60a9edf8 100644
--- a/layouts/shortcodes/figure.html
+++ b/layouts/shortcodes/figure.html
@@ -11,6 +11,7 @@
     <img
       class="mx-auto my-0 rounded-md"
       alt="{{ $altText }}"
+      loading="lazy"
       {{ if findRE "^https?" $url.Scheme }}
         src="{{ $url.String }}"
       {{ else }}
diff --git a/layouts/shortcodes/screenshot.html b/layouts/shortcodes/screenshot.html
index 39640ac3..8e95d806 100644
--- a/layouts/shortcodes/screenshot.html
+++ b/layouts/shortcodes/screenshot.html
@@ -8,6 +8,7 @@
       {{- if or (.Get "alt") (.Get "caption") }}
         alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify | plainify }}{{ end }}"
       {{- end -}}
+      loading="lazy"
       width="100%"
       height="auto"
       style="max-width:{{ div $image.Width 2 }}px; max-height:{{ div $image.Height 2 }}px;"