Medium-like lazy loading of images

tips & tricks
6

One new trick. Instead of linking the 48px placeholder image, you can just generate a much smaller image, say 2px and embed it directly to the HTML as base64:

{{ $image := (.Page.Resources.GetMatch (index .Params 0)) }}
{{ $placeholder := $image.Resize “2x q20” }}

<div class="image_placeholder" style="max-width: {{  $image.Width }}px">
<div class="placeholder" data-large="{{ $image.Permalink }}">  
  <img src="data:image/jpeg;base64,{{ $placeholder.Content | base64Encode }}" class="img-small loaded">
  <div style="padding-bottom: {{ div (mul $image.Height 100.0) $image.Width }}%;"></div>
</div>
</div>
4 Likes