Native lazy-loading of images on Hugo based website
Images on the web take up more bandwidth than any other type of resources. Why do we have to load them all even if we are never going to scroll far enough to see them? Turns out that we don’t have to anymore — support for native lazy loading is coming. If you are using Hugo static site generator, the implementation of it is equally simple as adding it to an HTML file and you don’t have a good reason not to do so.
<img src="cat.jpg" alt="Cat" loading="lazy" width="600" height="400">
Hugo render hook templates for the rescue
Goldmark — a markdown parser written in Go since version 60 is the default Hugo library to render your content. It allows hooking into the rendering phase of particular HTML elements, like image, link or heading. This powerful feature allows us to manipulate the HTML markup for <img /> elements and add loading, width and height attributes.
Hugo documentation for markdown render hooks provides a lot of great examples and explanations. Using the power of this feature we are able to implement a native lazy loading using a custom template. Like so:
<!-- layouts/_default/_markup/render-image.html -->
{{ $img := imageConfig (add "/static" (.Destination | safeURL)) }}
<img
src="{{ .Destination | safeURL }}"
alt="{{ .Text }}"
loading="lazy"
width="{{ $img.Width }}"
height="{{ $img.Height }}"
/>
Hopefully, you found this little tip helpful. Please don’t be too concerned about the browser support for lazy loading via attribute. This feature comes for free! If a browser doesn’t support it, it is simply ignored and everything is working as it did ever before. Progressive enhancement for the win!
Bye 👋
Thanks for the helpful article! :)
I am glad it helped you out.
Nice post, btw what kind of comment section that you use at your site?
Hi, thanks! Comments section is my custom build but I shared a lot of details and base implementation in these two posts:
Enjoy 😊
Thank a lot I'll read it later