References

Mainly: https://discourse.gohugo.io/t/medium-like-lazy-loading-of-images/16016

Also:

https://jmperezperez.com/medium-image-progressive-loading-placeholder/

https://css-tricks.com/the-blur-up-technique-for-loading-background-images/

Markup

<!-- Image -->
{{ if .Resources.ByType "image" }}
	{{ $feature := .Resources.GetMatch "feature"}}
	{{ $placeholder := $feature.Resize "48x q20" }}
	<figure class="c-lqip-container mb4" data-large="{{($feature.Resize "756x").RelPermalink}}">
		<img src="{{$placeholder.RelPermalink}}" alt="{{$feature.Params.alt}}" class="c-lqip__small-img"{{with $feature.Params.title }} title="{{.}}"{{end}}>
		<div class="c-lqip__spacer" style="padding-bottom: {{ div (mul $feature.Height 100.0) $feature.Width }}%;"></div>
	</figure>
{{end}}

CSS

/* Blurry Image component */
.c-lqip-container{
  background-color: #f6f6f6;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  /*Applies to small & large image*/
  & img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: opacity 1s linear;
    opacity: 0;
    &.is-loaded{
      opacity: 1;
    }
  }
  & .c-lqip__small-img{
    filter: blur(50px);
    /* this is needed so Safari keeps sharp edges */
    transform: scale(1);
  }
  & .c-lqip__img{
    
  }
  & .c-lqip__spacer{
    /*padding-bottom: 66.6%;*/
  }
}

JQuery (LQIP.js)

window.onload = function() {

  var placeholder = $('.c-lqip-container');

  placeholder.each( function(index) {
    // 1: load small image and show it
    var smallImgElement = $(this).find('.c-lqip__small-img');
    var img = new Image();
    img.src = smallImgElement.attr('src');
    img.onload = function () {
      smallImgElement.addClass('is-loaded');
    };

    // 2: load large image
    var imgLarge = new Image();
    imgLarge.src = $(this).data('large');
    imgLarge.onload = function () {
      imgLarge.classList.add('is-loaded', 'c-lqip__img');
    };
    $(this).append(imgLarge);

  })
}