LQIP (Low Quality Image Placeholders) is a sweet trick to improve a website perceived performance. The idea is to create very-low quality derivatives of your images which will be loaded blazing fast while waiting for the browser to load HQ versions.

Many techniques exists, but let’s stick with a 100% HTML/CSS implementation, using Hugo Image processing features.

Simple example with the avatar (quick ‘n dirty mode) :

 {{ $resource := resources.Get "avatar.jpg" }}
 {{ $r := $resource.Fit "64x64" | images.Filter (images.GaussianBlur 0.5) }}
 {{ $base64_image := $r.Content | base64Encode }}

We first get the avatar.jpg (our pristine), and shrink it to 64x64. Then apply a Gaussian blur of 0.5 on the result, and finally encode it to base64.

Now, using Data URI, we can apply our LQIP as CSS background on our image :


Just make sure that background is covering the whole img space and we are done :

.app-header-avatar {
  background-size: cover;