This plugin add webp supporting in your html. Also supports <amp-img>

$ npm i posthtml posthtml-webp

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

Before:

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

After:

<picture>
    <source type="image/webp" srcset="image.jpg.webp">
    <img src="image.jpg">
</picture>
<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>

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)

Type: Array<string>
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

Type: Array<string>
Default: []
Description: list of extension for which the transformation will be ignored
Example: extensionIgnore: ['svg'] will ignore transformation for images with the svg extension