posthtml-picman v1.1.2

posthtml-picman

HTML pictures simplified

Automatically unwrap pic tag into rich picture.

Example

You write magical tag like this

<pic
  src="./images/1.jpg"
  alt="The cute cat"
></pic>

We transform it into following

<picture>
  <source
    type="image/webp"
    media="(max-width: 991px)"
    srcset="./images/1-tablet.webp 1x, ./images/1-tablet-2x.webp 2x"
  />

  <source
    media="(max-width: 991px)"
    srcset="./images/1-tablet.jpg 1x, ./images/1-tablet-2x.jpg 2x"
  />
  
  <source
    type="image/webp"
    srcset="./images/1.webp 1x, ./images/1-2x.webp 2x"
  />

  <img
    src="./images/1.jpg"
    srcset="./images/1-2x.jpg 2x"
    alt="The cute cat"
  />
</picture>

Usage

npm i posthtml-picman -D

Then add picman to your posthtml config .posthtmlrc:

{
  plugins: {
    ...
    "posthtml-picman": {}
    ...
  }
}

Options

Plugin options

Tag options