feat: Intercept the md image render and replace with a version that loads a scaled webp

Author: jmsplank

layouts/_default/_markup/render-image.html

@@ -0,0 +1,11 @@
+{{ $alt := .Text | default "" }}
+{{ $title := .Title | default $alt }}
+{{ $src := .Destination | safeURL }}
+{{ with .Page.Resources.GetMatch $src }}
+<figure>
+    {{ partial "_images/picture.html" (dict "src" . "alt" $alt "title" $title) }}
+    {{ with $alt }}<figcaption>
+        <p style="text-transform: uppercase; font-size: x-small;">{{- . -}}</p>
+    </figcaption>{{ end }}
+</figure>
+{{ end }}

layouts/partials/_images/picture.html

@@ -0,0 +1,21 @@
+{{ $originalImage := .src }}
+{{ $class := .class }}
+{{ $lazy := .lazy | default true }}
+{{ $caption := .alt | default "" }}
+
+{{ $w := float $originalImage.Width }}
+{{ $h := float $originalImage.Height }}
+{{ $aspectRatio := div $w $h }}
+
+{{ $media_query_widths := slice 1400 1200 992 768 576 480 360}}
+
+<picture>
+    {{ range $media_query_widths }}
+    {{ $nw := . }}
+    {{ $nh := div $nw $aspectRatio | int }}
+    {{ $img_webp := $originalImage.Resize (printf "%dx%d webp q100" $nw $nh) }}
+    <source media="(min-width:{{$nw}}px)" srcset="{{ $img_webp.Permalink }}" type="image/webp">
+    {{end}}
+    <img {{with $lazy}} loading="lazy" class="img-fluid" data-src="{{$originalImage.RelPermalink}}" {{else}}
+        src="{{$originalImage.RelPermalink}}" {{end}} alt="{{ $caption }}">
+</picture>