kobel/layouts/partials/components/image.html

<!--
type: string - default empty
url: string
alt: string
width: int
height: int
-->
{{ $sizes := slice "320" "640" "960" "1280" }}
{{ $ext := path.Ext .url }}
{{ $name := path.Base (replace .url $ext "") }}
{{ $dir := path.Dir .url }}
{{ $mediaWidthControl := "(min-width: 1240px) 50px, 70vw" }}

<picture>
  <source 
    type="image/avif"
    srcset="
      {{ range $i, $size := $sizes }}
        {{ $dir }}/{{ $name }}-{{ $size }}{{ $ext }}.avif {{ $size }}w, 
      {{ end }}
      {{ .url }}.avif {{ .width }}w
    "
    sizes="{{ $mediaWidthControl }}"
  />
  <source 
    type="image/webp"
    srcset="
      {{ range $i, $size := $sizes }}
        {{ $dir }}/{{ $name }}-{{ $size }}{{ $ext }}.webp {{ $size }}w, 
      {{ end }}
      {{ .url }}.webp {{ .width }}w
    "
    sizes="{{ $mediaWidthControl }}"
  />
  <img 
    class="{{ .type }}" 
    width="{{ .width }}" 
    height="{{ .height }}"
    srcset="
      {{ range $i, $size := $sizes }}
        {{ $dir }}/{{ $name }}-{{ $size }}{{ $ext }} {{ $size }}w, 
      {{ end }}
      {{ .url }} {{ .width }}w
    "
    src="{{ .url }}"
    alt="{{ .alt }}" 
    loading="lazy"
    decoding="async"
  >
</picture>


{{/*  https://www.brycewray.com/posts/2023/05/better-code-image-processing-hugo-render-hook-edition/  */}}