Lazy Loading

Hugo: Dynamic Image Rendering with URL Replacement

If you want to use Hugo to dynamically render images with URL replacement and lazy loading, here is the code. {{ $card__show_image := .Params.show_image }} {{ $cardImageURL := "" }} {{ if and (eq $card__show_image "true") (.Params.images) }} {{ with .Params.images }} {{ range $image := . | first 1 }} {{ $cardImageURL = replaceRE "(=w|s)(2400|1600)" "$1360" $image }} {{ end }} {{ end }} <img src="{{ $cardImageURL | absURL }}" alt="{{ .LinkTitle }}" decoding="async" loading="lazy"> {{ end }} I’m using this code on my blog to render images with lazy loading and responsive image sizes on different part of my blog, like cards, cover images etc.