https://github.com/posthtml/posthtml-webp
Add webp supporting in your html
https://github.com/posthtml/posthtml-webp
Last synced: 10 months ago
JSON representation
Add webp supporting in your html
- Host: GitHub
- URL: https://github.com/posthtml/posthtml-webp
- Owner: posthtml
- License: mit
- Created: 2018-12-24T13:05:54.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-03-04T04:46:14.000Z (almost 3 years ago)
- Last Synced: 2024-10-29T21:06:08.307Z (over 1 year ago)
- Language: JavaScript
- Size: 2.05 MB
- Stars: 6
- Watchers: 4
- Forks: 7
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: changelog.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# posthtml-webp 
[![NPM][npm]][npm-url]
[![Deps][deps]][deps-url]
[![Build][build]][build-badge]
[![Coverage][cover]][cover-badge]
[![Standard Code Style][style]][style-url]
[![Chat][chat]][chat-badge]
This plugin add webp supporting in your html. Also supports [``](https://amp.dev/documentation/components/amp-img/)
## Install
```bash
$ npm i posthtml posthtml-webp
```
## Usage
``` js
const fs = require('fs');
const posthtml = require('posthtml');
const posthtmlWebp = require('posthtml-webp');
posthtml()
.use(posthtmlWebp(/* Plugin options */))
.process(html/*, options */)
.then(result => fs.writeFileSync('./after.html', result.html));
```
## Example
Before:
``` html
```
After:
``` html
```
## Options
#### `extension`
Type: `string`
Default: `.webp`
Description: *Add custom extension or even prefix*
Example: `image.jpg => image.jpg?as=webp (instead of image.jpg.webp)`
#### `replaceExtension`
Type: `Boolean`
Default: `false`
Description: *Replace the extension of the source image with .webp instead of appending .webp to the original filename*
Example: `image.jpg => image.webp (instead of image.jpg.webp)`
#### `classIgnore`
Type: `Array`
Default: `[]`
Description: *list of classes for which the transformation will be ignored*
Example: `classIgnore: ['ignore-webp']` will ignore transformation for images with the class `ignore-web`
#### `extensionIgnore`
Type: `Array`
Default: `[]`
Description: *list of extension for which the transformation will be ignored*
Example: `extensionIgnore: ['svg']` will ignore transformation for images with the `svg` extension
#### `lazySrcset`
Type: `String`
Default: `data-srcset`
Description: *The attribute used for lazy webp loading. Use it if you have lazy attribute for `srcset` on your images. It will be set on created `` to later be processed by external lazy loading library.*
Example: `lazySrcset: 'my-srcset'` will set `my-srcset` attribute on ``
#### `lazySrc`
Type: `String`
Default: `data-src`
Description: *The attribute used for lazy webp loading. The original `![]()
` may not contain `src` at all, but instead some custom lazy-loading attribute. Or it may contain just a placeholder image inside `src` which shouldn't be used for webp conversion. `lazySrc` will define a custom attribute name to look at when processing your lazy loaded images. Note that `lazySrcset` is still needed even if `![]()
` has only `lazySrc` defined, because `srcset` is the mechanism for defining a source file for the ``. See `lazySrcset` option description.*
Example: `lazySrc: 'my-src'` will convert an image inside `my-src` attribute, instead of regular `src`.
### License [MIT](LICENSE)
[npm]: https://img.shields.io/npm/v/posthtml-webp.svg
[npm-url]: https://npmjs.com/package/posthtml-webp
[deps]: https://david-dm.org/posthtml/posthtml-webp.svg
[deps-url]: https://david-dm.org/posthtml/posthtml-webp
[style]: https://img.shields.io/badge/code%20style-standard-yellow.svg
[style-url]: http://standardjs.com/
[build]: https://travis-ci.org/posthtml/posthtml-webp.svg
[build-badge]: https://travis-ci.org/posthtml/posthtml-webp
[cover]: https://coveralls.io/repos/posthtml/posthtml-webp/badge.svg
[cover-badge]: https://coveralls.io/r/posthtml/posthtml-webp
[chat]: https://badges.gitter.im/posthtml/posthtml.svg
[chat-badge]: https://gitter.im/posthtml/posthtml?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge"