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.
I will make the WebP image
Put the code for the AVIF5 because now Hugo don’t support AVIF
- 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:
- WebP Support
- AVIF Support
- Loading Lazy
- Image size support
- 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.
If you liked this article,
please share it on