Skip to content
This repository has been archived by the owner on Sep 24, 2024. It is now read-only.

shelldandy/lqip-pug

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

lqip-pug

npm version JavaScript Style Guide

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.

Live Demo

Example

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 = require('gulp')
const pug = require('gulp-pug')

const BlurryPug = require('lqip-pug')
const blurry = new BlurryPug({
  // directory where your source images live must be an absolute path
  baseDir: process.cwd(),
  // 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
  template: (presrc, src) => `<img src="${presrc}" data-src="${src}" class="lazyload" />`
})

gulp.task('pug', () =>
  gulp.src('./*/**.pug')
  .pipe(pug({
    locals: {blur: name => blurry.blur(name)}
  }))
  .pipe(gulp.dest('./public'))
)

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:

<img src="data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAALABADASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAwQG/8QAIxAAAgECBgIDAAAAAAAAAAAAAQMCBREABAYHEkEhcTEyYf/EABUBAQEAAAAAAAAAAAAAAAAAAAQF/8QAHREAAQQCAwAAAAAAAAAAAAAAAQADBBECBRIhsf/aAAwDAQACEQMRAD8AfcbVdOrdDqun4LcMxMcDKwKyYzBIuDcX4kXxrdq8i6j7f0XKOVJDFptOB+ORJJ/D5JxdHLIU2bVIVBrPvOMAJS9nvDwbNRJXIxPdu/eAYyyOiLV2TpW3BbR4+L//2Q==" data-src="img/tenis.jpg" class="lazyload" />

Smile you have made your site much more performant.

Credits

  • lqip-loader for the inspiration
  • Example picture by Ben O'Sullivan on Unsplash