lqip-pug
My take on low quality image placehoder for pug static builds
The basic idea implies combining this with something like lazysizes to have everything lazy loaded while giving something to see to the user while that loads.
Setup
The main idea is to abstract everything in a mixin for ease of use. Here are shown the defaults the component has:
gulpfile.js
const gulp = const pug = const BlurryPug = const blurry = // directory where your source images live must be an absolute path baseDir: process // compiled blurry image width size in pixels size: 16 // the compiled path of the image aka where the hosted real image lives compiledPath: 'img' // a function that will render the template for your mixins `<img src="" data-src="" class="lazyload" />` gulp
Now on your pug files create a mixin like this:
mixins.pug
mixin img(name) !=blur(name)
and use it like this:
index.pug
+img('tenis.jpg')
You'll get something like this after compile:
Smile you have made your site much more performant.
Credits
- lqip-loader for the inspiration
- Example picture by Ben O'Sullivan on Unsplash