From 82a44935bee3c2ff521a8743a1a6a1bfb47a2ca7 Mon Sep 17 00:00:00 2001
From: Tomy Hsieh <git@tomy.me>
Date: Mon, 8 May 2023 17:04:55 +0700
Subject: [PATCH 1/5] =?UTF-8?q?=E2=9C=A8=20feat:=20Lazy=20load=20image=20b?=
 =?UTF-8?q?y=20default?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layouts/_default/_markup/render-image.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 9c7096dcd..2b5974d08 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -32,6 +32,7 @@
           {{ end }}
         {{ end }}
         alt="{{ $altText }}"
+        loading="lazy"
       />
       {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
     </figure>

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 2/5] =?UTF-8?q?=E2=9C=A8=20feat:=20Lazy=20load=20image=20i?=
 =?UTF-8?q?n=20all=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 2b5974d08..83ecf4820 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 70e8fe888..06ee2dfd6 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -31,6 +31,7 @@ <h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
               {{ 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 330cc07f6..93c24b187 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 d482d3a61..5aae1f8dc 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 93ce24623..ca465a231 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 ee1191687..4c669a577 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 9b0134426..60a9edf83 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 39640ac31..8e95d806b 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;"

From 88c73a3aae90d20052ec71adac84035f4ea00c11 Mon Sep 17 00:00:00 2001
From: Tomy Hsieh <git@tomy.me>
Date: Sat, 27 May 2023 05:31:23 +0800
Subject: [PATCH 3/5] =?UTF-8?q?=E2=9C=A8=20feat:=20Make=20image=20lazy=20l?=
 =?UTF-8?q?oad=20togglable?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config/_default/params.toml                |  1 +
 layouts/_default/_markup/render-image.html | 22 +++++++++++++++++++---
 layouts/_default/single.html               |  4 +++-
 layouts/partials/article-link.html         |  4 +++-
 layouts/partials/author.html               |  4 +++-
 layouts/partials/home/profile.html         |  4 +++-
 layouts/partials/logo.html                 |  7 ++++++-
 layouts/shortcodes/figure.html             |  4 +++-
 layouts/shortcodes/screenshot.html         |  4 +++-
 9 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/config/_default/params.toml b/config/_default/params.toml
index 61e2b9365..c79ad0811 100644
--- a/config/_default/params.toml
+++ b/config/_default/params.toml
@@ -11,6 +11,7 @@ autoSwitchAppearance = true
 
 enableSearch = false
 enableCodeCopy = false
+enableImageLazyLoading = true
 
 # robots = ""
 fingerprintAlgorithm = "sha256"
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 83ecf4820..c2b220ad1 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -3,7 +3,14 @@
 {{ $caption := .Title }}
 {{ if findRE "^https?" $url.Scheme }}
   <figure>
-    <img class="mx-auto my-0 rounded-md" src="{{ $url.String }}" alt="{{ $altText }}" loading="lazy" />
+    <img
+      class="mx-auto my-0 rounded-md"
+      src="{{ $url.String }}"
+      alt="{{ $altText }}" 
+      {{ if .Site.Params.enableImageLazyLoading | default true }}
+        loading="lazy"
+      {{ end }}
+    />
     {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
   </figure>
 {{ else }}
@@ -32,13 +39,22 @@
           {{ end }}
         {{ end }}
         alt="{{ $altText }}"
-        loading="lazy"
+        {{ if .Site.Params.enableImageLazyLoading | default true }}
+          loading="lazy"
+        {{ end }}
       />
       {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
     </figure>
   {{ else }}
     <figure>
-      <img class="mx-auto my-0 rounded-md" src="{{ $url.String }}" alt="{{ $altText }}" loading="lazy" />
+      <img
+        class="mx-auto my-0 rounded-md"
+        src="{{ $url.String }}"
+        alt="{{ $altText }}"
+        {{ if .Site.Params.enableImageLazyLoading | default true }}
+          loading="lazy"
+        {{ end }}
+      />
       {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
     </figure>
   {{ end }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 06ee2dfd6..9f3c52cd4 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -31,7 +31,9 @@ <h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
               {{ end }}
             {{ end }}
             alt="{{ $.Params.featureAlt | default $.Params.coverAlt | default "" }}"
-            loading="lazy"
+            {{ if .Site.Params.enableImageLazyLoading | default true }}
+              loading="lazy"
+            {{ end }}
           />
           {{ 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 93c24b187..f934bae03 100644
--- a/layouts/partials/article-link.html
+++ b/layouts/partials/article-link.html
@@ -23,7 +23,9 @@
             160w, {{- (.Fill "320x240 smart").RelPermalink }} 2x"
             src="{{ (.Fill "160x120 smart").RelPermalink }}"
           {{ end }}
-          loading="lazy"
+          {{ if .Site.Params.enableImageLazyLoading | default true }}
+            loading="lazy"
+          {{ end }}
         />
       </a>
     </div>
diff --git a/layouts/partials/author.html b/layouts/partials/author.html
index 5aae1f8dc..ca7b17bcc 100644
--- a/layouts/partials/author.html
+++ b/layouts/partials/author.html
@@ -10,7 +10,9 @@
           height="96"
           alt="{{ $.Site.Author.name | default "Author" }}"
           src="{{ $authorImage.RelPermalink }}"
-          loading="lazy"
+          {{ if .Site.Params.enableImageLazyLoading | default true }}
+            loading="lazy"
+          {{ end }}
         />
       {{ end }}
     {{ end }}
diff --git a/layouts/partials/home/profile.html b/layouts/partials/home/profile.html
index ca465a231..324e31f17 100644
--- a/layouts/partials/home/profile.html
+++ b/layouts/partials/home/profile.html
@@ -14,7 +14,9 @@
           height="144"
           alt="{{ $.Site.Author.name | default "Author" }}"
           src="{{ $authorImage.RelPermalink }}"
-          loading="lazy"
+          {{ if .Site.Params.enableImageLazyLoading | default true }}
+            loading="lazy"
+          {{ end }}
         />
       {{ end }}
     {{ end }}
diff --git a/layouts/partials/logo.html b/layouts/partials/logo.html
index 4c669a577..1fefceb71 100644
--- a/layouts/partials/logo.html
+++ b/layouts/partials/logo.html
@@ -9,7 +9,9 @@
         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 .Site.Params.enableImageLazyLoading | default true }}
+          loading="lazy"
+        {{ end }}
       />
       {{- if $logo_dark }}
       <img
@@ -18,6 +20,9 @@
         height="{{ div $logo_dark.Height 2 }}"
         class="max-h-[10rem] max-w-[10rem] object-scale-down object-left dark:hidden"
         alt="{{ .Site.Title }}"
+        {{ if .Site.Params.enableImageLazyLoading | default true }}
+          loading="lazy"
+        {{ end }}
       />
       {{- end}}
     </a>
diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html
index 60a9edf83..b6d142898 100644
--- a/layouts/shortcodes/figure.html
+++ b/layouts/shortcodes/figure.html
@@ -11,7 +11,9 @@
     <img
       class="mx-auto my-0 rounded-md"
       alt="{{ $altText }}"
-      loading="lazy"
+      {{ if .Site.Params.enableImageLazyLoading | default true }}
+        loading="lazy"
+      {{ end }}
       {{ if findRE "^https?" $url.Scheme }}
         src="{{ $url.String }}"
       {{ else }}
diff --git a/layouts/shortcodes/screenshot.html b/layouts/shortcodes/screenshot.html
index 8e95d806b..653e1fd77 100644
--- a/layouts/shortcodes/screenshot.html
+++ b/layouts/shortcodes/screenshot.html
@@ -8,7 +8,9 @@
       {{- if or (.Get "alt") (.Get "caption") }}
         alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify | plainify }}{{ end }}"
       {{- end -}}
-      loading="lazy"
+      {{ if .Site.Params.enableImageLazyLoading | default true }}
+        loading="lazy"
+      {{ end }}
       width="100%"
       height="auto"
       style="max-width:{{ div $image.Width 2 }}px; max-height:{{ div $image.Height 2 }}px;"

From 0d4fe03a45432c4efbac67767ffdeed056eb196b Mon Sep 17 00:00:00 2001
From: Tomy Hsieh <git@tomy.me>
Date: Sat, 27 May 2023 05:37:02 +0800
Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=9B=A0=20fix:=20Syntax=20error?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 layouts/_default/_markup/render-image.html | 7 ++++---
 layouts/_default/single.html               | 2 +-
 layouts/partials/article-link.html         | 2 +-
 layouts/partials/author.html               | 2 +-
 layouts/partials/home/profile.html         | 2 +-
 5 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index c2b220ad1..e2009a069 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -1,13 +1,14 @@
 {{ $url := urls.Parse .Destination }}
 {{ $altText := .Text }}
 {{ $caption := .Title }}
+{{ $lazyLoad := $.Page.Site.Params.enableImageLazyLoading | default true }}
 {{ if findRE "^https?" $url.Scheme }}
   <figure>
     <img
       class="mx-auto my-0 rounded-md"
       src="{{ $url.String }}"
       alt="{{ $altText }}" 
-      {{ if .Site.Params.enableImageLazyLoading | default true }}
+      {{ if $lazyLoad }}
         loading="lazy"
       {{ end }}
     />
@@ -39,7 +40,7 @@
           {{ end }}
         {{ end }}
         alt="{{ $altText }}"
-        {{ if .Site.Params.enableImageLazyLoading | default true }}
+        {{ if $lazyLoad }}
           loading="lazy"
         {{ end }}
       />
@@ -51,7 +52,7 @@
         class="mx-auto my-0 rounded-md"
         src="{{ $url.String }}"
         alt="{{ $altText }}"
-        {{ if .Site.Params.enableImageLazyLoading | default true }}
+        {{ if $lazyLoad }}
           loading="lazy"
         {{ end }}
       />
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 9f3c52cd4..90c5110bd 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -31,7 +31,7 @@ <h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">
               {{ end }}
             {{ end }}
             alt="{{ $.Params.featureAlt | default $.Params.coverAlt | default "" }}"
-            {{ if .Site.Params.enableImageLazyLoading | default true }}
+            {{ if $.Site.Params.enableImageLazyLoading | default true }}
               loading="lazy"
             {{ end }}
           />
diff --git a/layouts/partials/article-link.html b/layouts/partials/article-link.html
index f934bae03..689bdf719 100644
--- a/layouts/partials/article-link.html
+++ b/layouts/partials/article-link.html
@@ -23,7 +23,7 @@
             160w, {{- (.Fill "320x240 smart").RelPermalink }} 2x"
             src="{{ (.Fill "160x120 smart").RelPermalink }}"
           {{ end }}
-          {{ if .Site.Params.enableImageLazyLoading | default true }}
+          {{ if $.Site.Params.enableImageLazyLoading | default true }}
             loading="lazy"
           {{ end }}
         />
diff --git a/layouts/partials/author.html b/layouts/partials/author.html
index ca7b17bcc..2d29aa82b 100644
--- a/layouts/partials/author.html
+++ b/layouts/partials/author.html
@@ -10,7 +10,7 @@
           height="96"
           alt="{{ $.Site.Author.name | default "Author" }}"
           src="{{ $authorImage.RelPermalink }}"
-          {{ if .Site.Params.enableImageLazyLoading | default true }}
+          {{ if $.Site.Params.enableImageLazyLoading | default true }}
             loading="lazy"
           {{ end }}
         />
diff --git a/layouts/partials/home/profile.html b/layouts/partials/home/profile.html
index 324e31f17..24fb6f636 100644
--- a/layouts/partials/home/profile.html
+++ b/layouts/partials/home/profile.html
@@ -14,7 +14,7 @@
           height="144"
           alt="{{ $.Site.Author.name | default "Author" }}"
           src="{{ $authorImage.RelPermalink }}"
-          {{ if .Site.Params.enableImageLazyLoading | default true }}
+          {{ if $.Site.Params.enableImageLazyLoading | default true }}
             loading="lazy"
           {{ end }}
         />

From 16c56d2129edb0c8109410cae5e196250c4a7c5f Mon Sep 17 00:00:00 2001
From: Tomy Hsieh <git@tomy.me>
Date: Sat, 27 May 2023 05:55:29 +0800
Subject: [PATCH 5/5] =?UTF-8?q?=F0=9F=93=96=20docs:=20Add=20information=20?=
 =?UTF-8?q?for=20`enableImageLazyLoading`=20param?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 exampleSite/config/_default/params.toml         | 1 +
 exampleSite/content/docs/configuration/index.md | 1 +
 2 files changed, 2 insertions(+)

diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml
index 21378072d..d828f1205 100644
--- a/exampleSite/config/_default/params.toml
+++ b/exampleSite/config/_default/params.toml
@@ -11,6 +11,7 @@ autoSwitchAppearance = true
 
 enableSearch = true
 enableCodeCopy = true
+enableImageLazyLoading = true
 
 # robots = ""
 fingerprintAlgorithm = "sha256"
diff --git a/exampleSite/content/docs/configuration/index.md b/exampleSite/content/docs/configuration/index.md
index 8bb275ca9..c341466a0 100644
--- a/exampleSite/content/docs/configuration/index.md
+++ b/exampleSite/content/docs/configuration/index.md
@@ -129,6 +129,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 |`autoSwitchAppearance`|`true`|Whether the theme appearance automatically switches based upon the visitor's operating system preference. Set to `false` to force the site to always use the `defaultAppearance`.|
 |`enableSearch`|`false`|Whether site search is enabled. Set to `true` to enable search functionality. Note that the search feature depends on the `outputs.home` setting in the [site configuration](#site-configuration) being set correctly.|
 |`enableCodeCopy`|`false`|Whether copy-to-clipboard buttons are enabled for `<code>` blocks. The `highlight.noClasses` parameter must be set to `false` for code copy to function correctly. Read more about [other configuration files](#other-configuration-files) below.|
+|`enableImageLazyLoading`|`true`|Whether image should be lazy loading.|
 |`robots`|_Not set_|String that indicates how robots should handle your site. If set, it will be output in the page head. Refer to [Google's docs](https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives) for valid values.|
 |`fingerprintAlgorithm`|`"sha256"`|String that indicates which hashing algorithm is used when fingerprinting assets. Valid options include `md5`, `sha256`, `sha384` and `sha512`.|
 |`header.layout`|`"basic"`|The layout of the page header and menu. Valid values are `basic`, `hamburger`, `hybrid` or `custom`. When set to `custom`, you must provide your own layout by creating a `/layouts/partials/header/custom.html` file.|