gulp-html-lqip
This is a plugin for gulp-html-transform
Adds Low Quality Image Placeholders using lqip to your html
Installing
Using npm
$ npm install --save gulp-html-lqip
Using yarn
$ yarn add gulp-html-lqip
Usage
gulpfile.js
const path = require('path')
const { transform } = require('gulp-html-transform')
const { lqip } = require('gulp-html-lqip')
gulp.task('html', () => {
gulp.src('src/**/*.html')
.pipe(transform(
lqip({
base: path.join(__dirname, 'src'),
addStyles: true,
})
))
.pipe(gulp.dest('dist'))
})
If you want to add the styles manually you can import index.css
from the package folder and remove addStyles
.
Html in:
Html out:
<div class="lqip" style="padding-top:50%;background-image:url(data:image/jpeg;base64,...">
<img src="image.jpg" onload="this.parentElement.className='lqip'">
</div>
API
lqip({
base: __dirname + '/src',
query: 'img[src]',
addStyles: boolean,
})