posthtml-webp

This plugin add webp supporting in your html.

Before:

<img src="image.jpg">

After:

<picture>
    <source type="image/webp" srcset="image.jpg.webp">
    <img src="image.jpg">
</picture>

Also supports <amp-img>

Before:

<amp-img alt="photo" width="550" height="368" layout="responsive" src="photo.png"></amp-img>

After:

<amp-img alt="photo" width="550" height="368" layout="responsive" src="photo.png.webp">
    <amp-img alt="photo" width="550" height="368" layout="responsive" src="photo.png" fallback=""></amp-img>
</amp-img>

Install

npm i posthtml posthtml-webp

Plugin options

replaceExtension (boolean)

Default: false

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)

Usage

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));

License MIT