I made a shortcode for Hugo as a drop-in replacement of the Hugo figure shortcode that uses lazy loading and markdownifys the caption and title. Might save someone with similar needs a bit of time.
And, keeping with an earlier thread of sharing resources, I’ve tagged the gist with #gohugo but the search there isn’t all that good.
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="{{ .Get "src" }}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}" {{ end }}{{ with .Get "width" }}width="{{.}}" {{ end }} class="lazyload" />
I went and looked up what the gif was, and I am still a little iffy on how it is used. Could you explain its inclusion, and your usage? 
It’s just a placeholder for src.
Yea, but what does it contain? An image of a carrot?
It’s invisible. I sometimes do use something similar with the site name and the shape of the image its replacing, but this one only serves the purpose of having something in the src tag.
Great work, I also used lazysizes and found it to be the best of the lazy loading libraries, in addition to loading the most appropriate image version.
If I see it right, you put width and height manually in the shortcode. Do you see a way for hugo to get this data automatically, at some point in the future? Or at least the proportion of width/height?
For my use case I let imagemagick generate the lowest possible quality (but same width/height) version of the image to use as a placeholder until the better version was loaded. It had some nice old-school aesthetic to it, but still was 10-20 kb per image instead of <1 kb for the gif placeholder.
It is a great library. Simple to use and plugins for most every scenario. I just carried over the width and height from the existing shortcode. My goal was to change only what I needed and otherwise leave it alone.