PostHTML Picture Srcset

This postHTML plugin uses rollup-images to generate webp versions of your png and jpeg images in multiple responsive sizes. It then replaces the reference to that image in your HTML with the corresponding <picture> tag and the corresponding srcset attributes.

Also includes fallback to the original image for older browsers.

Before:

<img src="bigimg.jpg" />

After:

<picture>
    <source data-srcset="/[e-mail] 640w, /[e-mail] 1300w, /[e-mail] 1800w, /bigimg.webp 1900w" type="image/webp" srcset="/[e-mail] 640w, /[e-mail] 1300w, /[e-mail] 1800w, /bigimg.webp 1900w">
    <source data-srcset="/bigimg.png" type="image/png" srcset="/bigimg.png">
    <img data-src="/bigimg.webp" skip width="1900" height="1200" nolazy="" alt="" src="/bigimg.webp">
</picture>

Install

npm i posthtml-picture-srcset

Usage

Describe how people can use this plugin. Include info about build systems if it's necessary.

const fs = require('fs');
const posthtml = require('posthtml');
const pictureSrcset = require('posthtml-picture-srcset');

posthtml()
    .use(
      pictureSrcset({
        cwd: resolve('src/assets/images'),
        imgDir: resolve('src/assets/images'),
        imageOptions: {
          generate: true,
          dir: ['src/assets/images'],
          size: [640, 1300, 1800],
          hook: 'renderStart',
          quality: 80,
          inputFormat: ['jpg', 'jpeg', 'png'],
          outputFormat: ['webp'],
          maxParallel: 25,
          forceUpscale: false,
          skipExisting: false,
        },
    )
    .process(html/*, options */)
    .then(result => fs.writeFileSync('./after.html', result.html));

Global Options

Option	Type	Description
cwd	path	The current working directory
imgDir	path	Image folder
imageOptions	object	See image options below

Image Options

Option	Type	Description
generate	path	The current working directory
dir	array	Pass in the image folder
size	array	Array of image sizes to generate
hook	string	Rollup hook, when to generate images
quality	number	Value between 1 and 100 for image generation quality
inputFormat	array	Image formats to run on
outputFormat	array	Image formats to generate
maxParallel	number	Maximum number of images to generate on one thread
forceUpscale	boolean	Generate larger images if a file resolution is less than the largest output size
skipExisting	boolean	Skip existing images

Contributing

See PostHTML Guidelines and contribution guide.