add browser-level lazy loading

ref: https://web.dev/browser-level-image-lazy-loading/
adityatelange · Mar 16, 2021 · c353447 · c353447
1 parent a982a29
commit c353447
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 2 deletions.
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
@@ -1,3 +1,3 @@
 <p>
-    <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}" {{ end }} />
+    <img loading="lazy" src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}" {{ end }} />
 </p>
diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html
@@ -5,7 +5,7 @@
     {{- if .Get "link" -}}
         <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
     {{- end }}
-    <img src="{{ .Get "src" }}{{- if eq (.Get "align") "center" }}#center{{- end }}"
+    <img loading="lazy" src="{{ .Get "src" }}{{- if eq (.Get "align") "center" }}#center{{- end }}"
          {{- if or (.Get "alt") (.Get "caption") }}
          alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
          {{- end -}}