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

| Name | Type | Default value | Description | | ----------- | ----------- | ------------- | --------------------------------------------------------------------------------------------------------------------- | | breakpoints | Record<string, number> | {} | Hash table looks like { breakpointName: value } Name will be used in file paths. | | retinaSuffix | string? | "-2x" | Suffix for using with hight dpi images. | | mobileFirst | boolean | false | Use either "max-width" or "min-width" in breakpoints. true means "min-width". |

Tag options

| Name | Type | Default value | Description | | ----------- | ----------- | ------------- | --------------------------------------------------------------------------------------------------------------------- | | src | string | undefined | Image path. | | imgClass | string? | "" | Class name to apply to img tag. | | picClass | string? | "" | Class name to apply to picture tag. | | alt | string? | "Image" | Alt string. Strongly recommended to use. |