feat: lazy load images in list items

Assumes list items generally occur below the fold.

May increase Lighthouse scores.

See #1986

wowchemy/layouts/partials/li_card.html

@@ -43,9 +43,11 @@
   {{ $resource := ($item.Resources.ByType "image").GetMatch "*featured*" }}
   {{ $anchor := $item.Params.image.focal_point | default "Smart" }}
   {{ with $resource }}
+  {{ $filters := slice (images.GaussianBlur 21) (images.Pixelate 8) }}
   {{ $image := .Fill (printf "808x455 %s" $anchor) }}
+  {{ $image_lq := (.Fill (printf "808x455 %s q1" $anchor)).Filter $filters }}
   <a href="{{ $item.RelPermalink }}">
-    <div class="img-hover-zoom"><img src="{{ $image.RelPermalink }}" class="article-banner" alt="{{ $item.Title }}"></div>
+    <div class="img-hover-zoom"><img src="{{ $image_lq.RelPermalink }}" data-src="{{ $image.RelPermalink }}" class="article-banner lazyload" alt="{{ $item.Title }}"></div>
   </a>
   {{end}}
 

wowchemy/layouts/partials/li_compact.html

@@ -78,9 +78,11 @@
   <div class="ml-3">
     {{ $resource := ($item.Resources.ByType "image").GetMatch "*featured*" }}
     {{ with $resource }}
+    {{ $filters := slice (images.GaussianBlur 21) (images.Pixelate 8) }}
     {{ $image := .Resize "150x" }}
+    {{ $image_lq := (.Resize "150x q1").Filter $filters }}
     <a href="{{$link}}" {{ $target | safeHTMLAttr }}>
-      <img src="{{ $image.RelPermalink }}" alt="{{ $item.Title }}">
+      <img src="{{ $image_lq.RelPermalink }}" data-src="{{ $image.RelPermalink }}" alt="{{ $item.Title }}" class="lazyload">
     </a>
     {{end}}
   </div>

wowchemy/layouts/partials/portfolio_li_card.html

@@ -20,9 +20,11 @@
 <div class="project-card project-item isotope-item {{ $js_tag_classes | safeHTMLAttr }}">
   <div class="card">
     {{ with $resource }}
-    {{ $image := .Resize (printf "550x q90 %s") }}
+    {{ $filters := slice (images.GaussianBlur 21) (images.Pixelate 8) }}
+    {{ $image := .Resize "550x" }}
+    {{ $image_lq := (.Resize "550x q1").Filter $filters }}
     <a href="{{ $link }}" {{ $target | safeHTMLAttr }} class="card-image hover-overlay">
-      <img src="{{ $image.RelPermalink }}" alt="{{ $item.Title }}" class="img-responsive">
+      <img src="{{ $image_lq.RelPermalink }}" data-src="{{ $image.RelPermalink }}" alt="{{ $item.Title }}" class="img-responsive lazyload">
     </a>
     {{ end }}
     <div class="card-text">

wowchemy/layouts/partials/portfolio_li_showcase.html

@@ -51,9 +51,11 @@
     <div class="col-12 col-md-6 order-first {{$order}}">
       {{ $resource := ($item.Resources.ByType "image").GetMatch "*featured*" }}
       {{ with $resource }}
+      {{ $filters := slice (images.GaussianBlur 21) (images.Pixelate 8) }}
       {{ $image := .Resize "540x" }}
+      {{ $image_lq := (.Resize "540x q1").Filter $filters }}
       {{if $do_link}}<a href="{{ $link }}" {{ $target | safeHTMLAttr }}>{{end}}
-        <img src="{{ $image.RelPermalink }}" alt="{{ $item.Title }}">
+        <img src="{{ $image_lq.RelPermalink }}" data-src="{{ $image.RelPermalink }}" alt="{{ $item.Title }}" class="lazyload">
       {{if $do_link}}</a>{{end}}
       {{end}}
     </div>