Skip to content

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 }}"
/>

Native lazy loading

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 👋

comments powered by Disqus