HTML pictures simplified
Automatically unwrap pic tag into rich picture.
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>
npm i posthtml-picman -D
Then add picman to your posthtml config .posthtmlrc
:
{
plugins: {
...
"posthtml-picman": {}
...
}
}
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" . |
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. |