https://github.com/shelldandy/lqip-pug

My take on lqip for pug static builds
https://github.com/shelldandy/lqip-pug

image-processing javascript performance pug

Last synced: about 2 months ago
JSON representation

My take on lqip for pug static builds

• Host: GitHub
• URL: https://github.com/shelldandy/lqip-pug
• Owner: shelldandy
• License: mit
• Archived: true
• Created: 2017-10-07T17:26:31.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2017-10-08T17:48:55.000Z (about 7 years ago)
• Last Synced: 2024-10-07T08:39:10.723Z (3 months ago)
• Topics: image-processing, javascript, performance, pug
• Language: JavaScript
• Homepage: https://shelldandy.github.io/lazy-example/
• Size: 1.94 MB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# lqip-pug

[![npm version](https://badge.fury.io/js/lqip-pug.svg)](https://badge.fury.io/js/lqip-pug)

[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

My take on low quality image placehoder for pug static builds

The basic idea implies combining this with something like [lazysizes](https://github.com/aFarkas/lazysizes) to have everything lazy loaded while giving something to see to the user while that loads.

[Live Demo](https://mike3run.github.io/lazy-example/)

![Example](example.gif)

## 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`

```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) => ``

})

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`

```pug

mixin img(name)

  !=blur(name)

```

and use it like this:

`index.pug`

```pug

+img('tenis.jpg')

```

You'll get something like this after compile:

```html



```

Smile you have made your site much more performant.

## Credits

* [lqip-loader](https://github.com/zouhir/lqip-loader) for the inspiration

* Example picture by Ben O'Sullivan on Unsplash