@kingkongdevs/posthtml-picture-srcset v1.0.2

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

Image Options

Contributing

See PostHTML Guidelines and contribution guide.