posthtml-retinate
Create a srcset attribute for retina images with posthtml
Also see: gulp-retinate
Installation
npm install posthtml posthtml-retinate
Example
const posthtml = ;const retinate = ; const inputHTML = '<img src="image@4x.png">'; // highest resolution imageconst outputHTML = html; // <img src="image.png" srcset="image@2x.png 2x, image@4x.png 4x">
Options
inputFlags
A has of flags to identify the scale of the source asset.
- Since:
1.0.0
- Property is
Optional
- Default value:
{ 1: '@1x', 2: '@2x', 4: '@4x' }
inputPlace
Identifies where the input flag is located in the source filename.
- Since:
1.0.0
- Property is
Optional
- Default value:
endsWith
- Validation:
- Must be either
startsWith
orendsWith
.
- Must be either
outputFlags
A hash of flags to identify the destination scales.
- Since:
1.0.0
- Property is
Optional
- Default value:
{ 1: '', 2: '@2x', 4: '@4x' }
outputPlace
Identifies where the output flag is position in the destination filename.
- Since:
1.0.0
- Property is
Optional
- Default value:
append
- Validation:
- Must be either
prepend
orappend
.
- Must be either
scaleUp
Whether or not images can be scaled up as well as down.
- Since:
1.0.0
- Property is
Optional
- Default value:
false
- Validation:
- Must be a valid
Boolean
.
- Must be a valid
For example, given image@2x.jpg
:
When false
(default):
<img src="image.jpg" srcset="image@2x.jpg 2x, image@4x.jpg 4x">
When true
:
<img src="image.jpg" srcset="image@2x.jpg 2x">