🔀 Merge pull request #552 from tomy0000000/lazy-load-image-by-default

✨ feat: Lazy load image by default

layouts/partials/article-link.html

@@ -23,6 +23,9 @@
             160w, {{- (.Fill "320x240 smart").RelPermalink }} 2x"
             src="{{ (.Fill "160x120 smart").RelPermalink }}"
           {{ end }}
+          {{ if $.Site.Params.enableImageLazyLoading | default true }}
+            loading="lazy"
+          {{ end }}
         />
       </a>
     </div>

layouts/partials/author.html

@@ -10,6 +10,9 @@
           height="96"
           alt="{{ $.Site.Author.name | default "Author" }}"
           src="{{ $authorImage.RelPermalink }}"
+          {{ if $.Site.Params.enableImageLazyLoading | default true }}
+            loading="lazy"
+          {{ end }}
         />
       {{ end }}
     {{ end }}

layouts/partials/home/profile.html

@@ -14,6 +14,9 @@
           height="144"
           alt="{{ $.Site.Author.name | default "Author" }}"
           src="{{ $authorImage.RelPermalink }}"
+          {{ if $.Site.Params.enableImageLazyLoading | default true }}
+            loading="lazy"
+          {{ end }}
         />
       {{ end }}
     {{ end }}

layouts/partials/logo.html

@@ -9,6 +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 }}"
+        {{ if .Site.Params.enableImageLazyLoading | default true }}
+          loading="lazy"
+        {{ end }}
       />
       {{- if $logo_dark }}
       <img
@@ -17,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>