feat(partials): implement LQIP renderer with WebP

assets/lazyimg.css

@@ -3,6 +3,10 @@
   display: none;
 }
 
+.no-js source.lazyload {
+  display: none;
+}
+
 /* Hides broken image icon which may shortly be disaplayed on load */
 img.lazyload:not([src]) {
 	visibility: hidden;

layouts/partials/lazyimg.html

@@ -28,5 +28,16 @@
     {{ warnf $usage }}
 {{ end }}
 
-{{ $sizes := partial (printf "resizer/%s" $params.resizer) $params }}
+{{/* Special handling for WebP renderers: */}}
-{{ return (partial (printf "renderer/%s" $params.renderer) (merge (dict "imgDict" $sizes) $params)) }}
+{{ if in $params.renderer "webp" }}
+    {{/* Override user-supplied target format */}}
+    {{ $resizeOptionsWebP := printf "%s webp" ($params.resizeOptions | replaceRE "(jpg|png|tif|bmp|gif)" "") }}
+    {{ $paramsWebP := merge $params (dict "resizeoptions" $resizeOptionsWebP) }}
+    {{ $imagesWebP := partial (printf "resizer/%s" $params.resizer) $paramsWebP }}
+    {{ $imagesRegular := partial (printf "resizer/%s" $params.resizer) $params }}
+    {{ partial (printf "renderer/%s" $params.renderer) (merge $params (dict "imgDict" $imagesWebP "imgDictFallback" $imagesRegular)) }}
+{{ else }}
+    {{ $sizes := partial (printf "resizer/%s" $params.resizer) $params }}
+    {{ partial (printf "renderer/%s" $params.renderer) (merge $params (dict "imgDict" $sizes)) }}
+{{ end }}
+

layouts/partials/renderer/_lqip-webp.html

@@ -1,7 +0,0 @@
-<picture>
-  <!-- TODO(kdevo): load webp images -->
-  <source type="image/webp"
-    srcset="
-      URL 100w,
-      URL 200w">
-</picture>

layouts/partials/renderer/lqip-webp.html

@@ -0,0 +1,19 @@
+{{ $class := .class }}
+{{ $noscriptSupport := .noscript }}
+{{ $imgDict := .imgDict }}
+{{ $imgDictFallback := .imgDictFallback }}
+
+<picture>
+  <source type="image/webp" 
+    {{- with $imgDict.lqip -}}
+        {{- $placeholderB64 := .Content | base64Encode -}}
+        {{- if gt (len $placeholderB64) 2048 }}
+            srcset="{{ .Permalink }}"
+        {{- else }}
+            srcset="data:{{ .MediaType }};base64,{{ $placeholderB64 }}"
+        {{- end }}
+    {{- end -}}
+    {{- with (default $imgDict.default $imgDict.lqip) }} height="{{ .Height }}" width="{{ .Width }}" {{- end -}}
+    {{- if $imgDict.responsive -}}{{ with partial "renderer/_srcset" $imgDict }} data-sizes="auto" data-srcset="{{ . }}"{{- end }} {{- end -}}>
+    {{ partial "renderer/lqip" (merge . (dict "imgDict" $imgDictFallback)) }}
+</picture>