Blurhash - compact representations of image placeholders

I recently discovered Blurhash - GitHub - woltapp/blurhash: A very compact representation of a placeholder for an image.
It creates compact image placeholders that can be used until the real images are loaded, or can also be used as an alternative to the computationally expensive css blur effect.
I don’t see a golang implementation on github yet, but I find the idea of pre-generated compact placeholders very interesting.
What do you think?

1 Like

I think @bep already does this with his photogallery theme using built in hugo?

1 Like

Yea, GitHub - bep/gallerydeluxe: Fast Hugo gallery theme/module suitable for lots of images.

The strategy used there is, in order:

  1. Show a gradient of the top 2 colors in the image (available in the Hugo API)
  2. Show a 20x20 pixel version of the image upscaled with a CSS blur filter applied.
  3. Show the full image.

Works really well.

4 Likes

Yes he does that in his examples.

An other classic/pure HTML idea is this one:

{{ $img  := resources.Get "your_image_path_whatever"  }}
{{ $placeholder := $img.Resize "3x q15" }}

<picture>
   <source type="image/png" srcset="{{- $img.Permalink -}}">
   <img 
   src="data:image/jpeg;base64,{{ $placeholder.Content | base64Encode }}"
   data-src="{{- $img.Permalink -}}"
   class="your_lazyload_class"
   width="{{- $img.Width -}}" height="{{- $img.Height -}}">
</picture>
2 Likes

Oh wow, great, thanks for the links and explanation!

Oooo so you progressively show 3 things, the gradient, then the low-rez on top of that, then the high rez? I was wondering why I couldn’t see the gradients, i only saw the low rez. I guess they load fast enough that I can’t ever see the gradient.

Yes. You will not notice the first step on faster connections, but you can throttle down the network in the Chrome developer console. If you select “3G slow” and refresh the page without cache, you’ll see.

Also, I thinkg the 3 step approach is just for the thumbnails – the lightbox image is the last 2 steps.

1 Like

The placeholder isn’t showing for me. When I remove the source elements above it in the inspector, it does show, so it’s rendered correctly.

I’m guessing this has to do with the your_lazyload_class. What might that look like?