posthtml-retinate

Create a srcset attribute for retina images with posthtml

Also see: gulp-retinate

Installation

npm install posthtml posthtml-retinate

Example

const posthtml = require('posthtml');
const retinate = require('posthtml-retinate');

const inputHTML = '<img src="[email protected]">'; // highest resolution image
const outputHTML = posthtml()
  .use(retinate())
  .process(inputHTML, { sync: true })
  .html;

// <img src="image.png" srcset="[email protected] 2x, [email protected] 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 or endsWith.

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 or append.

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.

For example, given [email protected]:

When false (default):

<img src="image.jpg" srcset="[email protected] 2x, [email protected] 4x">

When true:

<img src="image.jpg" srcset="[email protected] 2x">