perf: Hugo image processing — auto-convert all images to WebP with srcset

Add layouts/partials/img.html helper that resizes and converts any Hugo
page-resource image to WebP, emitting a responsive srcset at multiple
widths. Wire it up to every image rendering site:

- post-card.html: thumbnail (600w/1000w) + avatar (64px WebP)
- post-card-large.html: featured card background (800w/1200w)
- posts/single.html: banner (1200w/1800w, eager) + gallery (800w/1200w)
- author-card.html: avatar (96px WebP, 2× retina)

Result: banner.png 7.9 MB → 496 KB WebP at 1800w (−94 %).
Hugo caches processed images in resources/_gen/ across builds.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-10 19:12:06 +02:00
parent 9af45979f1
commit 36767c3d4d
5 changed files with 58 additions and 26 deletions
+7 -11
View File
@@ -10,7 +10,7 @@
{{- if not $thumb -}}{{- $thumb = $post.Resources.GetMatch "01.png" -}}{{- end -}}
<div class="card-media aspect-editorial">
{{- if $thumb -}}
<img class="w-full h-full object-cover" src="{{ $thumb.RelPermalink }}" alt="{{ $post.Title }}" loading="lazy" decoding="async">
{{- partial "img.html" (dict "res" $thumb "widths" (slice 600 1000) "sizes" "(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw" "class" "w-full h-full object-cover" "alt" $post.Title) -}}
{{- else -}}{{- with $post.Params.banner -}}
{{- partial "media.html" (dict "media" . "class" "w-full h-full object-cover") -}}
{{- else -}}
@@ -40,16 +40,12 @@
{{- $authorPage := site.GetPage (printf "authors/%s" .) -}}
{{- with $authorPage -}}
{{- $avRes := .Resources.GetMatch "avatar.*" -}}
{{- $avSrc := "" -}}
{{- with $avRes }}{{ $avSrc = .RelPermalink }}{{ else }}{{ with $.Params.avatar }}{{ $avSrc = . }}{{ end }}{{ end -}}
{{- with $avSrc -}}
<img
src="{{ . }}"
alt="{{ $authorPage.Params.name | default $authorPage.Title }}"
class="w-5 h-5 object-cover border border-smoke flex-shrink-0"
loading="lazy"
>
{{- end -}}
{{- if $avRes -}}
{{- $av := $avRes.Resize "64x webp" -}}
<img src="{{ $av.RelPermalink }}" alt="{{ $authorPage.Params.name | default $authorPage.Title }}" class="w-5 h-5 object-cover border border-smoke flex-shrink-0" width="{{ $av.Width }}" height="{{ $av.Height }}" loading="lazy" decoding="async">
{{- else -}}{{- with .Params.avatar -}}
<img src="{{ . }}" alt="{{ $authorPage.Params.name | default $authorPage.Title }}" class="w-5 h-5 object-cover border border-smoke flex-shrink-0" loading="lazy" decoding="async">
{{- end -}}{{- end -}}
<span class="label text-fog">{{ .Params.name | default .Title }}</span>
<span class="text-smoke" aria-hidden="true">/</span>
{{- end -}}