initial: support lqip and responsive image rendering/resizing

layouts/partials/renderer/_lqip-webp.html

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

layouts/partials/renderer/_srcset.html

@@ -0,0 +1,8 @@
+{{/* Input: Input: dict {"responsive": [RESOURCE, ...]}. Output: srcset string */}}
+
+{{ $images := .responsive }}
+{{ $srcset := slice }}
+{{ range $images }}
+    {{ $srcset = append (printf "%s %dw" .Permalink .Width) $srcset }}
+{{ end }}
+{{ return  (delimit $srcset ",\n") }}

layouts/partials/renderer/lqip.html

@@ -0,0 +1,28 @@
+{{ $class := .class }}
+{{ $alt := .alt }}
+{{ $noscriptSupport := .noscript }}
+{{ $imgDict := .imgDict }}
+{{ if $noscriptSupport }}
+<noscript>
+    <!-- TODO: add responsiveness -->
+    <img src="{{ $imgDict.default.Permalink }}" {{ with $alt }} alt="{{ . }}" {{ end -}} 
+    class="{{ $class }}" loading="lazy" 
+    {{- with $imgDict.default }} height="{{ .Height }}" width="{{ .Width }}" {{ end -}}>
+</noscript>
+{{ end }}
+<img 
+{{- with $imgDict.lqip -}}
+    {{- $placeholderB64 := .Content | base64Encode -}}
+    {{- if gt (len $placeholderB64) 2048 }}
+        src="{{ .Permalink }}"
+    {{- else }}
+        src="data:{{ .MediaType }};base64,{{ $placeholderB64 }}"
+    {{- end }}
+    data-src="{{ $imgDict.default.Permalink }}" 
+    class="{{ with $class }}{{ . }} {{ end }}blur-up lazyload" 
+{{ else }}
+    src="{{ $imgDict.default.Permalink }}" class="{{ $class }} lazyload" 
+{{- 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 -}}
+{{- with $alt }} alt="{{ . }}" {{- end }}>