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="/[email protected] 640w, /[email protected] 1300w, /[email protected] 1800w, /bigimg.webp 1900w" type="image/webp" srcset="/[email protected] 640w, /[email protected] 1300w, /[email protected] 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.