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
+2 -2
View File
@@ -73,7 +73,7 @@
{{- if not $bannerImg -}}{{- $bannerImg = .Resources.GetMatch "01.png" -}}{{- end -}}
{{- if $bannerImg -}}
<div class="w-full overflow-hidden mb-16 md:mb-24" style="max-height: 75vh">
<img class="w-full object-cover" src="{{ $bannerImg.RelPermalink }}" alt="{{ .Title }}" loading="eager" decoding="async">
{{- partial "img.html" (dict "res" $bannerImg "widths" (slice 1200 1800) "sizes" "100vw" "class" "w-full object-cover" "alt" .Title "loading" "eager") -}}
</div>
{{- else -}}{{- with .Params.banner -}}
<div class="w-full overflow-hidden mb-16 md:mb-24" style="max-height: 75vh">
@@ -116,7 +116,7 @@
{{- if $video -}}
<video class="w-full" src="{{ $video.RelPermalink }}" poster="{{ .RelPermalink }}" autoplay loop muted playsinline></video>
{{- else -}}
<img class="w-full" src="{{ .RelPermalink }}" alt="" loading="lazy" decoding="async">
{{- partial "img.html" (dict "res" . "widths" (slice 800 1200) "sizes" "(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw" "class" "w-full") -}}
{{- end -}}
</div>
</figure>