feat(images): encode Markdown images to WebP at build time

hugo.toml

@@ -348,6 +348,14 @@ enable = false
   [[module.imports]]
     path = "github.com/google/docsy/dependencies"
     disable = false
+  [[module.mounts]]
+    source = "assets"
+    target = "assets"
+  # Content images are mounted into assets so the image render hook can
+  # process them (Hugo can only process files that are resources).
+  [[module.mounts]]
+    source = "content/en"
+    target = "assets/contentimg"
   [[module.mounts]]
     source = "static"
     target = "static"

layouts/_default/_markup/render-image.html

@@ -1,14 +1,44 @@
-<!-- Images that use the standard image format for markdown will be displayed in a 
+<!-- Images that use the standard image format for markdown will be displayed in a
   magnific modal popup. Use format ![alt text](/path/to/image.img) -->
 <!-- Place this file in layouts > _default > _markup > render-image.html -->
 <!-- Also place the image-modal.css and partial/image-modal.html appropriately. -->
-<!-- The image is passed to openModal directly, so no generated id is needed. The previous
-  `first 6 (shuffle (seq 1 500))` emitted a whole slice, e.g. id="[487 38 279 330 254 290]",
-  which is not a valid HTML id. openModal accepts an <img> element as well as an id. -->
+<!-- PNG and JPEG sources are encoded to WebP at build time and offered through
+  <picture>. The original stays as the <img> fallback, so nothing in content has
+  to change and browsers without WebP support still get a working image.
+  Content is mounted at assets/contentimg (see hugo.toml) because Hugo can only
+  process files that are resources. -->
 <!-- Onclick opens the modal, and displays/overlays the clicked image. -->
 <!-- attribution appreciated. github: zjeaton web: https://froglegs.co -->
 
+{{- $dest := .Destination -}}
+{{- $alt := .Text -}}
+{{- $class := "md-image-responsive" -}}
+{{- with .Title }}{{ $class = printf "md-image-responsive %s" . }}{{ end -}}
+{{- $img := "" -}}
+{{- $ext := lower (path.Ext $dest) -}}
+
+{{- if and (in (slice ".png" ".jpg" ".jpeg") $ext) (not (urls.Parse $dest).Scheme) (not (hasPrefix $dest "//")) -}}
+  {{- $rel := $dest -}}
+  {{- if not (hasPrefix $dest "/") -}}
+    {{- with .Page.File -}}
+      {{- $rel = path.Join (replace .Dir "\\" "/") $dest -}}
+    {{- end -}}
+  {{- end -}}
+  {{- $img = resources.Get (path.Join "contentimg" $rel) -}}
+  {{- if not $img -}}{{- $img = resources.Get $rel -}}{{- end -}}
+{{- end -}}
+
 <div class="md__image">
-  <img src="{{ .Destination | safeURL }}" onclick="openModal(this)" alt="{{ .Text }}"
-  class="md-image-responsive{{ with .Title }} {{ . }}{{ end }}" />
-</div>
+{{- with $img }}
+  {{- $webp := .Process "webp q85" }}
+  <picture>
+    <source srcset="{{ $webp.RelPermalink }}" type="image/webp" width="{{ .Width }}" height="{{ .Height }}">
+    <img src="{{ $dest | safeURL }}" onclick="openModal(this)" alt="{{ $alt }}"
+    width="{{ .Width }}" height="{{ .Height }}"
+    class="{{ $class }}" />
+  </picture>
+{{- else }}
+  <img src="{{ $dest | safeURL }}" onclick="openModal(this)" alt="{{ $alt }}"
+  class="{{ $class }}" />
+{{- end }}
+</div>

layouts/partials/image-modal.html

@@ -14,8 +14,10 @@
     // If it's a string (image ID), get the source using the ID
     src = document.getElementById(imageIdOrElement).src;
   } else if (imageIdOrElement instanceof HTMLImageElement) {
-    // If <img>, get the source directly
-    src = imageIdOrElement.src;
+    // If <img>, get the source directly. currentSrc is what the browser actually
+    // chose, so inside a <picture> the modal reuses the already-fetched WebP
+    // rather than downloading the larger original.
+    src = imageIdOrElement.currentSrc || imageIdOrElement.src;
   }
 
   if (src && src.includes("#")) {