feat: reduce image sizes with WEBP

Can reduce image sizes by > 5x on a typical site that previously output JPGs and PNGs

(Facilitated now that Hugo reliably supports WEBP)

Also, adds some missing image Heights and Widths to help improve SEO and reduce CLS.

wowchemy/layouts/_default/_markup/render-image.html

@@ -38,9 +38,9 @@
            {{- with $height }} height="{{.}}"{{end}}
            {{- with $img_class }} class="{{.}}"{{end}} />
         {{- else }}
-          {{- $img_lg := $img.Fit "1200x1200" -}}
-          {{- $img_md := $img_lg.Fit "760x760" -}}{{/* Match `.docs-article-container` max-width */}}
-          {{- $img_sm := $img_md.Fit "400x400" -}}
+          {{- $img_lg := $img.Fit "1200x1200 webp" -}}
+          {{- $img_md := $img_lg.Fit "760x760 webp" -}}{{/* Match `.docs-article-container` max-width */}}
+          {{- $img_sm := $img_md.Fit "400x400 webp" -}}
           {{- $width := $width | default $img_md.Width -}}
           {{- $height := $height | default $img_md.Height -}}
           <img alt="{{ $alt }}" srcset="

wowchemy/layouts/partials/page_header.html

@@ -45,20 +45,17 @@
 
 {{/* Determine image placement. */}}
 {{ $placement := .Params.image.placement | default 1 }}{{/* Default to full column width. */}}
+{{/* Fit image to container's max width */}}
 {{ $image_container := "" }}
 {{ if eq $placement 2}}
   {{ $image_container = "container" }}
-  {{ if gt $featured.Width 1200 }}
-    {{ $image = $featured.Resize "1200x" }}
-  {{ end }}
+  {{ $image = $featured.Fit "1200x2500 webp" }}
 {{else if eq $placement 3}}
   {{ $image_container = "container-fluid" }}
-  {{ $image := $featured.Fit "2560x2560" }}
+  {{ $image := $featured.Fit "2560x2560 webp" }}
 {{else}}
   {{ $image_container = "article-container" }}
-  {{ if gt $featured.Width 720 }}
-    {{ $image = $featured.Resize "720x" }}
-  {{ end }}
+  {{ $image = $featured.Fit "720x2500 webp" }}
 {{end}}
 
 <div class="article-container pt-3">

wowchemy/layouts/partials/views/card.html

@@ -44,9 +44,12 @@
   {{ $resource := ($item.Resources.ByType "image").GetMatch "*featured*" }}
   {{ $anchor := $item.Params.image.focal_point | default "Smart" }}
   {{ with $resource }}
-  {{ $image := .Fill (printf "808x455 %s" $anchor) }}
+  {{ $image := .Fill (printf "808x455 webp %s" $anchor) }}
   <a href="{{ $link }}" {{ $target | safeHTMLAttr }}>
-    <div class="img-hover-zoom"><img src="{{ $image.RelPermalink }}" class="article-banner" alt="{{ $item.Title }}" loading="lazy"></div>
+    <div class="img-hover-zoom">
+      <img src="{{ $image.RelPermalink }}" height="{{ $image.Height }}" width="{{ $image.Width }}"
+           class="article-banner" alt="{{ $item.Title }}" loading="lazy">
+    </div>
   </a>
   {{end}}
 

wowchemy/layouts/partials/views/compact.html

@@ -76,9 +76,10 @@
   <div class="ml-3">
     {{ $resource := ($item.Resources.ByType "image").GetMatch "*featured*" }}
     {{ with $resource }}
-    {{ $image := .Resize "150x" }}
+    {{ $image := .Resize "150x webp" }}
     <a href="{{$link}}" {{ $target | safeHTMLAttr }}>
-      <img src="{{ $image.RelPermalink }}" alt="{{ $item.Title }}" loading="lazy">
+      <img src="{{ $image.RelPermalink }}" height="{{ $image.Height }}" width="{{ $image.Width }}"
+           alt="{{ $item.Title }}" loading="lazy">
     </a>
     {{end}}
   </div>

wowchemy/layouts/partials/views/masonry.html

@@ -22,9 +22,10 @@
 
 <div class="card">
   {{ with $resource }}
-  {{ $image := .Resize "550x" }}
+  {{ $image := .Resize "550x webp" }}
   <a href="{{ $link }}" {{ $target | safeHTMLAttr }} class="card-image hover-overlay">
-    <img src="{{ $image.RelPermalink }}" alt="{{ $item.Title }}" class="img-responsive" loading="lazy">
+    <img src="{{ $image.RelPermalink }}" height="{{ $image.Height }}" width="{{ $image.Width }}"
+         alt="{{ $item.Title }}" class="img-responsive" loading="lazy">
   </a>
   {{ end }}
   <div class="card-text">

wowchemy/layouts/partials/views/showcase.html

@@ -51,9 +51,10 @@
     <div class="col-12 col-md-6 order-first {{$order}}">
       {{ $resource := ($item.Resources.ByType "image").GetMatch "*featured*" }}
       {{ with $resource }}
-      {{ $image := .Resize "540x" }}
+      {{ $image := .Resize "540x webp" }}
       {{if $do_link}}<a href="{{ $link }}" {{ $target | safeHTMLAttr }}>{{end}}
-        <img src="{{ $image.RelPermalink }}" alt="{{ $item.Title }}" loading="lazy">
+        <img src="{{ $image.RelPermalink }}" height="{{ $image.Height }}" width="{{ $image.Width }}"
+             alt="{{ $item.Title }}" loading="lazy">
       {{if $do_link}}</a>{{end}}
       {{end}}
     </div>

wowchemy/layouts/shortcodes/figure.html

@@ -37,9 +37,9 @@
            {{- with .Get "height" }} height="{{.}}"{{end}}
            {{- with $img_class }} class="{{.}}"{{end}} />
         {{- else }}
-          {{- $img_lg := $img.Fit "1200x1200" -}}
-          {{- $img_md := $img_lg.Fit "760x760" -}}{{/* Match `.docs-article-container` max-width */}}
-          {{- $img_sm := $img_md.Fit "400x400" -}}
+          {{- $img_lg := $img.Fit "1200x1200 webp" -}}
+          {{- $img_md := $img_lg.Fit "760x760 webp" -}}{{/* Match `.docs-article-container` max-width */}}
+          {{- $img_sm := $img_md.Fit "400x400 webp" -}}
           {{- $width := (.Get "width") | default $img_md.Width -}}
           {{- $height := (.Get "height") | default $img_md.Height -}}
           <img alt="{{ $alt }}" srcset="

wowchemy/layouts/shortcodes/gallery.html

@@ -7,7 +7,7 @@
 
 {{/* Gallery options */}}
 {{ $sort_order := .Get "order" | default "asc" }}
-{{ $resize_options := .Get "resize_options" | default "x190" }}
+{{ $resize_options := printf "%s webp" (.Get "resize_options" | default "x190") }}
 
 <div class="gallery">