Lazy load below-the-fold images

[jamesericdavidson]

Proposal

In line with #250, Gokarna should offer and document a method to lazy load below-the-fold images.

Proof of concept

e.g. As a shortcode (img.html), invoked as {{< img src="path/to/image" alt="Description of image" >}}:

{{- $width := "100%" }}
{{- $height := "100%" }}
{{- $loading := "lazy" }}

{{- $src := .Get "src" }}
{{- $alt := .Get "alt" }}
{{- $width := or ($.Get "width") $width }}
{{- $height := or ($.Get "height") $height }}
{{- $loading := or ($.Get "loading") $loading }}

<img
    {{- with $src }} src="{{ . }}" {{- end }}
    {{- with $alt }} alt="{{ . }}" {{- end }}
    {{- with $width }} width="{{ . }}" {{- end }}
    {{- with $height }} height="{{ . }}" {{- end }}
    {{- with $loading }} loading="{{ . }}" {{- end -}} />

Why?

Per the MDN, setting these attributes achieves two things:

1. Loading of below-the-fold (offscreen) images is deferred
2. Layout shifts are prevented

More information

There are ways to process images and change how images are rendered in Hugo without resorting to a shortcode.

Always lazy loading images (as in the above render hook example; even for above-the-fold content) confers a drop in Lighthouse score, ergo this solution needs to allow eager or lazy values as appropriate.

[jamesericdavidson]

P.S. This is naive, and doesn't respect native Hugo or CDN methods of making images lossy and appropriately sized for different screens.

[jamesericdavidson]

We could use https://github.com/aFarkas/lazysizes for this too