feat(partials): use hugo-mods/lazyimg for improved images

* use https://github.com/hugo-mods/lazyimg under the hood
  for `logoSmall`, `logoBig`, `background` and gallery images
* allow rendering as webp with fallback for gallery and logo
* add responsive background images via media queries
* config: add `renderer` and `resizer` for `Image` section
  (delegated to lazyimg module)
* breaking: remove "lazysizes.min.js" (lazyimg provides own)
* breaking(config): remove static image fallback when no asset is found
  for `logoSmall`, `logoBig`, `background` and gallery images
* breaking(config): remove `useLazySizes`; always true now
* breaking(config): remove `Image.useLQIP`; use `renderer` instead
* breaking: remove `img` shortcode; use `lazyimg` instead

5 files changed, 29 insertions, 244 deletions

diff --git a/layouts/partials/body-top.html b/layouts/partials/body-top.html
index 4a7cab1..a5c8cfe 100644
--- a/layouts/partials/body-top.html
+++ b/layouts/partials/body-top.html
@@ -25,29 +25,15 @@
 <nav class="row middle-xs center-xs {{ if not .IsHome -}} nav-fixed nav-shadow {{- end }}">
   <div class="col-xs-6 col-sm-1 logo" style="{{ if not .IsHome }}visibility: visible;{{- end }}">
     <a href="{{ "#" | relLangURL }}">
-        {{ $scratch := newScratch }}
-        {{ $imgSize := default "96x" .Site.Params.Image.NavLogo.resize }}
-        {{ $resizeOptions := default "q90 Gaussian" .Site.Params.Image.NavLogo.resizeOptions }}
-        {{ with (resources.Get .Site.Params.logoSmall) -}}
-            {{ $img := (slice (.Resize (printf "%s %s" $imgSize $resizeOptions))) | resources.Concat (printf "navlogo%s" (path.Ext .)) }}
-            {{ $scratch.Set "img" $img.Permalink }}
-            {{ $scratch.Set "imgW" .Width }}
-            {{ $scratch.Set "imgH" .Height }}
-        {{- else -}}
-            {{ $scratch.Set "img" .Site.Params.logoSmall }}
-        {{- end }}
-        <img 
-        {{ if .Site.Params.Feat.useLazySizes }}
-            data-src="{{ $scratch.Get "img" }}" 
-            class="lazyload"
-        {{ else }}
-            src="{{ $scratch.Get "img" }}"
-            loading="lazy"
-        {{ end }} 
-        alt="Home"
-        {{ with $scratch.Get "imgH" -}} height="{{ . }}" {{- end }}
-        {{ with $scratch.Get "imgW" }} width="{{ . }}" {{ end }}
-        >
+      {{ partial "lazyimg" (dict 
+        "img" (resources.Get .Site.Params.logoSmall)
+        "maxsize" (default "96x" site.Params.Image.NavLogo.resize)
+        "lqipsize" (default "16x" site.Params.Image.NavLogo.resize)
+        "resizeoptions" (default "q92 Gaussian" site.Params.Image.NavLogo.resizeOptions)
+        "alt" "Home"
+        "renderer" "webp"
+        "noscript" false
+      ) }}
     </a>
   </div>
     {{ range .Site.Menus.main }}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index aa19ca7..191ee9d 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -79,8 +79,6 @@
   {{- end }}
 
   <link rel="stylesheet" href="{{ (resources.Get "sass/main.scss" | resources.ExecuteAsTemplate "sass/main.scss" . | resources.ToCSS (dict "targetPath" "style.css" "outputStyle" "compressed") | resources.Fingerprint).Permalink }}">
-  <!-- <link rel="stylesheet" href="critical.css"> -->
-  <!-- <link rel="stylesheet" href="{{ (resources.Get "sass/main.scss" | resources.ExecuteAsTemplate "sass/main.scss" . | resources.ToCSS (dict "targetPath" "style.css" "outputStyle" "compressed") | resources.Fingerprint).Permalink }}" media="print" onload="this.media='all'"> -->
 
   {{ if .Site.Params.Feat.useStructuredData -}}
     {{ $s := (resources.Get "person.json" | resources.ExecuteAsTemplate "person.json" .).Content }}
@@ -91,9 +89,7 @@
     {{ $_ := unmarshal $s }}
   {{- end }}
 
-  {{ if .Site.Params.Feat.useLazySizes -}}
-    <script src="{{ (resources.Get "js/vendor/lazysizes.min.js").Permalink }}" async></script>
-  {{- end }}
+  {{ partial "lazyimg-setup" . }}
 
   {{ if .Site.Params.Feat.googleTagManager }}
     <!-- Google Tag Manager -->
diff --git a/layouts/partials/logo-img.html b/layouts/partials/logo-img.html
index 803cd26..fed8283 100644
--- a/layouts/partials/logo-img.html
+++ b/layouts/partials/logo-img.html
@@ -1,99 +1,9 @@
-{{ $scratch := newScratch }}
-{{ with (resources.Get .Site.Params.logoBig) -}}
-    {{ $resize := default (printf "%dx" (cond (lt .Width 1200) .Width 1200)) $.Site.Params.Image.Logo.resize }}
-    {{ $resizeOptions :=  default "MitchellNetravali q85" $.Site.Params.Image.Logo.resizeOptions }}
-    {{ $resizeLQIP := default "200x" $.Site.Params.Image.Logo.resizeLQIP }}
-    {{ $useLQIP := default true $.Site.Params.Image.Logo.useLQIP }}
-    {{ $responsive := default true $.Site.Params.Image.Logo.responsive }}
-    {{ $name := default "homelogo" $.Site.Params.Image.Logo.name }}
-
-    <!-- Image resizing -->
-    {{ $img := .Resize (printf "%s %s" $resize $resizeOptions) }}
-    {{ $img := slice $img | resources.Concat (printf "%s-%d%s" $name . (path.Ext $img.Permalink)) }} 
-    {{ $scratch.Set "img" $img.Permalink }}
-    {{ $scratch.Set "imgW" $img.Width }}
-    {{ $scratch.Set "imgH" $img.Height }}
-
-
-    {{ if $useLQIP -}}
-        {{ $lqip := .Resize (printf "%s %s" $resizeLQIP $resizeOptions) }}
-        {{ $scratch.Set "lqipRes" $lqip }}
-    {{- end }}
-
-    {{ if and $responsive (gt $img.Width 200) -}}
-        <!-- Responsive dynamic resizing from $lqipSize to $resize -->
-        {{ $startWidth := (default 100 ($scratch.Get "lqipRes").Width) }}
-        {{ $sizes := seq $startWidth 50 $img.Width }}
-        {{ $n := 5 }}
-        {{ if gt $n (len $sizes) -}}
-        {{ $n = len $sizes }}
-        {{- end }}
-        {{ $part := int (div (len $sizes) $n) }}
-        {{ $wset := slice }}
-        {{ range (seq 1 (sub $n 1)) -}}
-            {{ $wset = append (index $sizes (mul $part .)) $wset }}
-        {{- end }}
-        {{ $wset = (uniq (append (int $img.Width) $wset)) }}
-
-        {{ $image := . }}
-        {{ $srcset := slice }}
-        {{ range $wset }}
-            <!-- Resize image and rename image -->
-            {{ $img := $image.Resize (printf "%dx %s" . $resizeOptions) }}
-            {{ $img := slice $img | resources.Concat (printf "%s-%d%s" $name . (path.Ext $img.Permalink)) }} 
-            {{ $scratch.Set "img" $img.Permalink }}
-            {{ $scratch.Set "imgW" $img.Width }}
-            {{ $scratch.Set "imgH" $img.Height }}
-            {{ $srcset = append (printf "%s %dw" $img.Permalink .) $srcset }}
-        {{- end }}
-        {{ $scratch.Set "srcset" (delimit $srcset ",\n") }}
-    {{ else if $responsive }}
-        {{ warnf "%s is too small (width: %dpx) to be resized to a responsive srcset!" . .Width }}
-    {{- end }}
-{{- else -}}
-    {{ $scratch.Set "img" .Site.Params.logoBig }}
-{{- end }}
-{{ if .Site.Params.Feat.useLazySizes }}
-<noscript>
-    <img
-    src="{{ $scratch.Get "img" }}" 
-    alt="{{ .Site.Title }}"
-    class="home-logo" 
-    loading="lazy"
-    {{ with $scratch.Get "imgH" -}}
-        height="{{ . }}" 
-    {{- end }}
-    {{ with $scratch.Get "imgW" }}
-        width="{{ . }}"
-    {{ end }}
-    >
-</noscript>
-{{ end }}
-<img 
-{{ if .Site.Params.Feat.useLazySizes }}
-    {{ with $scratch.Get "lqipRes" }}
-    {{ $placeholderB64 := .Content | base64Encode }}
-    {{ if gt (len $placeholderB64) 3072 -}}
-        src="{{ .Permalink }}"
-    {{- else -}}
-        src="data:{{ .MediaType }};base64,{{ $placeholderB64 }}"
-    {{- end }}
-    {{- end }}
-    data-src="{{ $scratch.Get "img" }}" 
-    alt="{{ .Site.Title }}"
-    class="home-logo blur-up lazyload"
-{{ else }}
-    src="{{ $scratch.Get "img" }}"
-    class="home-logo"
-{{ end }} 
-{{ with ($scratch.Get "srcset") }}
-    data-sizes="auto"
-    data-srcset="{{ . }}"
-{{ end }}
-{{ with $scratch.Get "imgH" -}}
-    height="{{ . }}" 
-{{- end }}
-{{ with $scratch.Get "imgW" }}
-    width="{{ . }}"
-{{ end }}
->
\ No newline at end of file
+{{ partial "lazyimg" (dict 
+    "img" site.Params.logoBig
+    "maxsize" (default "1200x" site.Params.Image.Logo.resize)
+    "lqipsize" (default "120x" site.Params.Image.Logo.resizeLQIP)
+    "resizeoptions" (default "q90 MitchellNetravali" site.Params.Image.Logo.resizeOptions)
+    "alt" site.Title 
+    "class" "home-logo"
+    "renderer" (default "webp" site.Params.Image.Logo.renderer)
+    "resizer" (default "auto" site.Params.Image.Logo.resizer)) }}
diff --git a/layouts/partials/sections/gallery/img.html b/layouts/partials/sections/gallery/img.html
index 46c8e8e..2881261 100644
--- a/layouts/partials/sections/gallery/img.html
+++ b/layouts/partials/sections/gallery/img.html
@@ -1,68 +1,10 @@
-{{ $scratch := newScratch }}
-{{ $imgSize := default "500x" .Site.Params.Image.Gallery.resize }}
-{{ $lqipSize := default "6x" .Site.Params.Image.Gallery.resizeLQIP }}
-{{ $useLQIP := default true .Site.Params.Image.Gallery.useLQIP }}
-{{ $resizeOptions := default "MitchellNetravali q85" (default .Page.Params.resizeOptions .Site.Params.Image.Gallery.resizeOptions) }}
-{{ with .Params.image -}}
-    {{ with (resources.Get .) -}}
-        {{ $image := .Resize (printf "%s %s" $imgSize $resizeOptions) }}
-        {{ $scratch.Set "img" $image.Permalink }}
-        {{ $scratch.Set "imgW" $image.Width }}
-        {{ $scratch.Set "imgH" $image.Height }}
-
-        {{ if $useLQIP -}}
-            {{ $lqip := $image }}
-            {{ $lqip := $image | images.Filter (images.GaussianBlur 10) }}
-            {{ $lqip = $lqip.Resize (printf "%s png" $lqipSize) }}
-            {{ $scratch.Set "imgPlaceholderRes" $lqip }}
-        {{- end }}
-    {{- else -}}
-        {{ $scratch.Set "img" (. | absURL) }}
-    {{- end }}
-{{- else -}}
-    {{ with .Params.github.repo -}}
-        {{ $scratch.Set "img" ((printf "https://raw.githubusercontent.com/%s/master/.github/logo.png" .) | absURL) }}
-    {{ else }}
-        {{ warnf "no gallery image set for %s" .File.FileName }}  
-    {{- end }}
-{{- end }}
-{{ if .Site.Params.Feat.useLazySizes }}
-<noscript>
-    <img
-    src="{{ $scratch.Get "img" }}" 
-    alt="{{ default .Params.title .Params.alt }}" 
-    loading="lazy"
-    {{ with $scratch.Get "imgH" -}}
-        height="{{ . }}" 
-    {{- end }}
-    {{ with $scratch.Get "imgW" }}
-        width="{{ . }}"
-        style="width: {{ . }}px; height: auto;"
-    {{ end }}
-    >
-</noscript>
-{{ end }} 
-<img 
-{{ if .Site.Params.Feat.useLazySizes }}
-    {{ with $scratch.Get "imgPlaceholderRes" }}
-    {{ $placeholderB64 := .Content | base64Encode }}
-        {{ if gt (len $placeholderB64) 3072 -}}
-            src="{{ .Permalink }}"
-        {{- else -}}
-            src="data:image/png;base64,{{ $placeholderB64 }}"
-        {{- end }}
-    {{- end }}
-    data-src="{{ $scratch.Get "img" }}" 
-    class="blur-up lazyload"
-{{ else }}
-    src="{{ $scratch.Get "img" }}"
-    loading="lazy"
-{{ end }} 
-alt="{{ default .Params.title .Params.alt }}" 
-{{ with $scratch.Get "imgH" -}} height="{{ . }}" {{- end }}
-{{ with $scratch.Get "imgW" }} width="{{ . }}" {{ end }}
-{{ with $scratch.Get "imgW" -}}
-    {{/* TODO(kdevo): Refactor this in SCSS */}}
-    style="width: {{ . }}px; height: auto;"
-{{- end }}
->
\ No newline at end of file
+{{ partial "lazyimg" (dict 
+    "img" .Params.image
+    "maxsize" (default "600x" site.Params.Image.Gallery.resize)
+    "responsivesizes" (default (slice "420x" "600x"))
+    "lqipsize" (default "16x Gaussian" site.Params.Gallery.Gallery.resizeLQIP)
+    "resizeoptions" (default "q90 MitchellNetravali" site.Params.Image.Gallery.resizeOptions)
+    "alt" (default .Params.title .Params.alt) 
+    "class" ""
+    "renderer" (default "lqip-webp" site.Params.Image.Gallery.renderer)
+    "resizer" (default "responsive" site.Params.Image.Gallery.resizer)) }}
\ No newline at end of file
diff --git a/layouts/shortcodes/img.html b/layouts/shortcodes/img.html
deleted file mode 100644
index ce9be04..0000000
--- a/layouts/shortcodes/img.html
+++ /dev/null
@@ -1,49 +0,0 @@
-{{ $res := resources.Get (.Get "img") }}
-{{ $alt := default "" (.Get "alt") }}
-{{ $parentResize := false }}
-{{ with .Parent }}
-    {{ $parentResize = .Get "resize" }}
-{{ end }}
-
-{{ $resize := default "Lanczos 500x" (default $parentResize (.Get "resize")) }}
-{{ $class := default "" (.Get "div") }}
-{{ $img := $res.Resize $resize }}
-{{ $width := $img.Width }}
-{{ $height := $img.Height }}
-
-
-{{ if .Site.Params.Feat.useLazySizes }} 
-{{ with $class }}
-<div class="{{ . }}">
-{{ end }}
-<noscript>
-<img
-src="{{ $img.Permalink }}"
-loading="lazy"
-{{ with $alt }}
-alt="{{ . }}"
-{{ end }}
-style="max-width: 100%; height: auto" 
-height="{{ $height }}"
-width="{{ $width }}"
->
-</noscript>
-{{ end }}
-<img 
-{{ if .Site.Params.Feat.useLazySizes }} 
-data-src="{{ $img.Permalink }}" 
-class="lazyload"
-{{ else }}
-src="{{ $img.Permalink }}"
-loading="lazy"
-{{ end }}
-style="max-width: 100%; height: auto" 
-{{ with $alt }}
-alt="{{ . }}"
-{{ end }}
-height="{{ $height }}"
-width="{{ $width }}"
->
-{{ with $class }}
-</div>
-{{ end }}
\ No newline at end of file