From b12b5901b63988c1ad1cb3c5d1d01eda33b9aa84 Mon Sep 17 00:00:00 2001
From: George Cushen <gcushen@users.noreply.github.com>
Date: Sun, 19 Dec 2021 18:14:40 +0000
Subject: [PATCH] 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 |  6 +++---
 wowchemy/layouts/partials/page_header.html          | 11 ++++-------
 wowchemy/layouts/partials/views/card.html           |  7 +++++--
 wowchemy/layouts/partials/views/compact.html        |  5 +++--
 wowchemy/layouts/partials/views/masonry.html        |  5 +++--
 wowchemy/layouts/partials/views/showcase.html       |  5 +++--
 wowchemy/layouts/shortcodes/figure.html             |  6 +++---
 wowchemy/layouts/shortcodes/gallery.html            |  2 +-
 8 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/wowchemy/layouts/_default/_markup/render-image.html b/wowchemy/layouts/_default/_markup/render-image.html
index 31375355..8c7cea6f 100644
--- a/wowchemy/layouts/_default/_markup/render-image.html
+++ b/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="
diff --git a/wowchemy/layouts/partials/page_header.html b/wowchemy/layouts/partials/page_header.html
index 5e3dd0dd..fb7806a0 100644
--- a/wowchemy/layouts/partials/page_header.html
+++ b/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">
diff --git a/wowchemy/layouts/partials/views/card.html b/wowchemy/layouts/partials/views/card.html
index 2aae4503..48b845ba 100644
--- a/wowchemy/layouts/partials/views/card.html
+++ b/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}}
 
diff --git a/wowchemy/layouts/partials/views/compact.html b/wowchemy/layouts/partials/views/compact.html
index 992a61e6..a398d1eb 100644
--- a/wowchemy/layouts/partials/views/compact.html
+++ b/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>
diff --git a/wowchemy/layouts/partials/views/masonry.html b/wowchemy/layouts/partials/views/masonry.html
index 7e0dadc2..f6778087 100644
--- a/wowchemy/layouts/partials/views/masonry.html
+++ b/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">
diff --git a/wowchemy/layouts/partials/views/showcase.html b/wowchemy/layouts/partials/views/showcase.html
index 64b2cbd0..7501d0e5 100644
--- a/wowchemy/layouts/partials/views/showcase.html
+++ b/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>
diff --git a/wowchemy/layouts/shortcodes/figure.html b/wowchemy/layouts/shortcodes/figure.html
index fcf81b5a..c9800d62 100644
--- a/wowchemy/layouts/shortcodes/figure.html
+++ b/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="
diff --git a/wowchemy/layouts/shortcodes/gallery.html b/wowchemy/layouts/shortcodes/gallery.html
index 6af6625f..63301104 100644
--- a/wowchemy/layouts/shortcodes/gallery.html
+++ b/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">