gulp-image-lqip

Gulp plugin which generates HTML image placeholders using lqip technique

Usage no npm install needed!

<script type="module">
  import gulpImageLqip from 'https://cdn.skypack.dev/gulp-image-lqip';
</script>

README

gulp-image-lqip

npm version Build Status dependencies Status devDependency Status

Parses your HTML files to find images and adds a data-src attribute to them which contains their Base64 representation.

Demo

Install

npm install --save-dev gulp-image-lqip

Usage

const gulp = require('gulp');
const gulpImgLqip = require('gulp-image-lqip');

gulp.task('default', () => {
  return gulp.src('*.html')
    // `gulp-image-lqip` needs filepaths
    // so you can't have any plugins before it
    .pipe(gulpImgLqip(__dirname))
})

Supported files

Currently ['jpeg', 'jpg', 'png', 'gif'] files are supported.

API

gulpImgLqip(rootPath, options)

rootPath

  • Type: string
  • Required

Define the rootPath of your website, it must be an absolute path.

options

Type: Object

attribute
  • Type: string
  • Default: data-src

Attribute which will contain the Base64 representation of your image.

pretty
  • Type: Boolean
  • Default: true

Use pretty to beautify the HTML files.

srcAttr
  • Type: string
  • Default: src

Attribute which contain your image.

Support me

If you want to thank me or support my work:

Thanks

Thanks lqip for the inspiration :+1:

License

MIT © Johann-S