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:
@@ -10,7 +10,7 @@
|
||||
{{- if not $thumb -}}{{- $thumb = $post.Resources.GetMatch "01.png" -}}{{- end -}}
|
||||
<div class="card-media w-full h-full absolute inset-0">
|
||||
{{- 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 800 1200) "sizes" "(max-width: 768px) 100vw, 50vw" "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 -}}
|
||||
|
||||
Reference in New Issue
Block a user