WebP and Avif With Hugo's Static Site Generator

Fundor333 | | Reading time 3 minutes | Word count 547

Card image cap Photo by ikhsana baihaqi on Unsplash

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 issiue5 on Github about an implementation with more responsive implementation6 (and more clean).

So I rewrote all the render hook.

  1. I will make the WebP image

  2. Put the code for the AVIF7 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. THE ISSIUE  ↩︎

  6. Hugo Responsive Images With Markdown Render Hook  ↩︎

  7. Add image processing support for AVIF  ↩︎

Comments

To reply to this post, you can send a Webmention or you can toot me at [email protected]
You mentioned this post on your site? Send a Webmention


This post is part of the Hugo Tricks series
  1. Hugo With Lazy Loading and Webp
  2. WebP and Avif With Hugo's Static Site Generator
  3. More Stuff I Do With Webmention, Micropub and Brid.gy
  4. New Render Image For Hugo
  5. Add Photo Page in your Hugo Site
  6. Github Action for Syndication Links

See Also