{{- /*
  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"
>