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: 3 months 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 (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-03T12:32:55.000Z (about 2 years ago)
• Last Synced: 2024-09-20T12:48:33.811Z (4 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

[![npm version](https://img.shields.io/npm/v/gulp-image-lqip.svg)](https://www.npmjs.com/package/gulp-image-lqip)

[![Build Status](https://github.com/Johann-S/gulp-image-lqip/workflows/Tests/badge.svg)](https://github.com/Johann-S/gulp-image-lqip/actions?workflow=Tests)

[![dependencies Status](https://img.shields.io/david/Johann-S/gulp-image-lqip.svg)](https://david-dm.org/Johann-S/gulp-image-lqip)

[![devDependency Status](https://img.shields.io/david/dev/Johann-S/gulp-image-lqip.svg)](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/)