https://github.com/Johann-S/gulp-image-lqip
Gulp plugin which generates HTML image placeholders using lqip technique
https://github.com/Johann-S/gulp-image-lqip
gulp gulp-plugin gulp-tasks lqip
Last synced: about 1 month ago
JSON representation
Gulp plugin which generates HTML image placeholders using lqip technique
- Host: GitHub
- URL: https://github.com/Johann-S/gulp-image-lqip
- Owner: Johann-S
- License: mit
- Created: 2019-06-06T12:15:23.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-03T12:32:55.000Z (over 2 years ago)
- Last Synced: 2024-09-20T12:48:33.811Z (7 months ago)
- Topics: gulp, gulp-plugin, gulp-tasks, lqip
- Language: JavaScript
- Homepage: https://gulp-image-lqip.netlify.com/
- Size: 1.05 MB
- Stars: 7
- Watchers: 3
- Forks: 2
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# gulp-image-lqip
[](https://www.npmjs.com/package/gulp-image-lqip)
[](https://github.com/Johann-S/gulp-image-lqip/actions?workflow=Tests)
[](https://david-dm.org/Johann-S/gulp-image-lqip)
[](https://david-dm.org/Johann-S/gulp-image-lqip?type=dev)
> Parses your HTML files to find images and adds a data-src attribute to them which contains their Base64 representation.
[Demo](https://gulp-image-lqip.netlify.com/)
## Install
```sh
npm install --save-dev gulp-image-lqip
```
## Usage
```js
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](https://github.com/jonschlinkert/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:
- You can become my [Patron](https://www.patreon.com/jservoire)
- Or buy me a coffee: [PayPal](https://www.paypal.me/jservoire)
## Thanks
Thanks [lqip](https://github.com/zouhir/lqip) for the inspiration :+1:
## License
MIT © [Johann-S](https://www.johann-servoire.fr/)