WebP and Avif With Hugo's Static Site Generator Generate WebP and AVIF with Hugo - #fingerfood #dev #devops #hugo


Card image cap

Photo by ikhsana baihaqi on Unsplash

WebP and Avif With Hugo's Static Site Generator


2021-11-04 | #fingerfood, #dev, #devops, #hugo,
Reading time 3 minutes | Word count 538


Generate WebP and AVIF with Hugo #fingerfood #dev #devops #hugo #avif #lazy load #microformat #webp
Generate WebP and AVIF with Hugo #fingerfood #dev #devops #hugo #avif #lazy load #microformat #webp

In the last episode

Some time ago I wrote about Hugo, WebP, AVIF and the lazy loading1.

In the main time I read more about it and find more about the Hugo’s render hook and the picture and img tag2 3.

I did like this way because I don’t find a “elegant solution” for the Avif/WebP generation problem. I don’t like my way of generating Avif/WebP with a code outsite the Hugo pipeline like my old post1 or my ispiration4.

I need a better way to do it.

And one day I recive an issiue4 on Github about an implementation with more responsive implementation5 (and more clean).

So I rewrote all the render hook.

  1. I will make the WebP image

  2. Put the code for the AVIF5 because now Hugo don’t support AVIF

  1. Add support for multiple img size

The code

So this is my code form the path layouts/_default/_markup/render-image.html where I build the images INSIDE the post.


{{ $src :=  .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) }}
{{ if $src }}

<picture>
    <!-- AVIF -->

    {{ $tinyw := default "500x avif" }}
    {{ $smallw := default "800x avif" }}
    {{ $mediumw := default "1200x avif" }}
    {{ $largew := default "1500x avif" }}

    {{ $data := newScratch }}
    {{ $data.Set "tiny" ($src.Resize $tinyw) }}
    {{ $data.Set "small" ($src.Resize $smallw) }}
    {{ $data.Set "medium" ($src.Resize $mediumw) }}
    {{ $data.Set "large" ($src.Resize $largew) }}

    {{ $tiny := $data.Get "tiny" }}
    {{ $small := $data.Get "small" }}
    {{ $medium := $data.Get "medium" }}
    {{ $large := $data.Get "large" }}

    <source media="(max-width: 376px)"
        srcset="{{with $tiny.RelPermalink }}{{.}}{{ end }}">

    <source media="(max-width: 992px)"
        srcset="{{with $small.RelPermalink }}{{.}}{{ end }}">

    <source media="(max-width: 1400px)"
        srcset="{{with $medium.RelPermalink }}{{.}}{{ end }}">

    <source media="(min-width: 1600px)"
        srcset="{{with $large.RelPermalink }}{{.}}{{ end }}">

    <!-- WebP -->

    {{ $tinyw := default "500x webp" }}
    {{ $smallw := default "800x webp" }}
    {{ $mediumw := default "1200x webp" }}
    {{ $largew := default "1500x webp" }}

    {{ $data := newScratch }}
    {{ $data.Set "tiny" ($src.Resize $tinyw) }}
    {{ $data.Set "small" ($src.Resize $smallw) }}
    {{ $data.Set "medium" ($src.Resize $mediumw) }}
    {{ $data.Set "large" ($src.Resize $largew) }}

    {{ $tiny := $data.Get "tiny" }}
    {{ $small := $data.Get "small" }}
    {{ $medium := $data.Get "medium" }}
    {{ $large := $data.Get "large" }}

    <source media="(max-width: 376px)"
        srcset="{{with $tiny.RelPermalink }}{{.}}{{ end }}">

    <source media="(max-width: 992px)"
        srcset="{{with $small.RelPermalink }}{{.}}{{ end }}">

    <source media="(max-width: 1400px)"
        srcset="{{with $medium.RelPermalink }}{{.}}{{ end }}">

    <source media="(min-width: 1600px)"
        srcset="{{with $large.RelPermalink }}{{.}}{{ end }}">


  <img class="img-post u-photo" src="{{ .Destination | safeURL }}" alt="{{ .Text }}" loading="lazy" decoding="async" width="{{ $src.Width }}" height="{{ $src.Height }}" />
</picture>
{{end}}

In this code I mix some of code of my old post, some of else code and some of new code.

And when the Hugo team will implement the AVIF we will be ready for it.

Conclusion

This magic code will be easy to read and has:

  1. WebP Support
  2. AVIF Support
  3. Loading Lazy
  4. Image size support
  5. MicroFormat support

So it is Internet ready and easy to forget and you can write a good post with all the optimization done for you.

  1. Hugo with lazy loading and webp  ↩︎ ↩︎

  2. Src set  ↩︎

  3. Tag HTML picture  ↩︎

  4. WebP and AVIF images on a Hugo website  ↩︎ ↩︎

  5. Hugo Responsive Images With Markdown Render Hook  ↩︎ ↩︎

If you liked this article,

please share it on

or webmention it

See Also