valknar
36767c3d4d
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>
39 lines
1.3 KiB
HTML
39 lines
1.3 KiB
HTML
{{- /*
|
|
Renders a Hugo image resource as an optimised WebP <img> with responsive srcset.
|
|
|
|
Parameters:
|
|
res — Hugo image resource (required)
|
|
widths — slice of pixel widths to generate, e.g. (slice 600 1200)
|
|
default: (slice 800 1600)
|
|
sizes — value for the <img sizes> attribute
|
|
default: "100vw"
|
|
class — CSS classes applied to <img>
|
|
alt — alt text (default "")
|
|
loading — "lazy" or "eager" (default "lazy")
|
|
*/ -}}
|
|
{{- $res := .res -}}
|
|
{{- $widths := .widths | default (slice 800 1600) -}}
|
|
{{- $sizes := .sizes | default "100vw" -}}
|
|
{{- $class := .class | default "" -}}
|
|
{{- $alt := .alt | default "" -}}
|
|
{{- $loading := .loading | default "lazy" -}}
|
|
|
|
{{- $entries := slice -}}
|
|
{{- $primary := $res -}}
|
|
{{- range $i, $w := $widths -}}
|
|
{{- $img := $res.Resize (printf "%dx webp" $w) -}}
|
|
{{- $entries = $entries | append (printf "%s %dw" $img.RelPermalink $w) -}}
|
|
{{- if eq $i 0 -}}{{- $primary = $img -}}{{- end -}}
|
|
{{- end -}}
|
|
<img
|
|
class="{{ $class }}"
|
|
src="{{ $primary.RelPermalink }}"
|
|
srcset="{{ delimit $entries ", " }}"
|
|
sizes="{{ $sizes }}"
|
|
alt="{{ $alt }}"
|
|
width="{{ $primary.Width }}"
|
|
height="{{ $primary.Height }}"
|
|
loading="{{ $loading }}"
|
|
decoding="async"
|
|
>
|