posthtml-retinate

Create a srcset attribute for retina images with posthtml. Also see: gulp-retinate.

Installation

npm install posthtml posthtml-retinate

Example

import posthtml from "posthtml";
import retinate from "posthtml-retinate";

const inputHTML = '<img src="[email protected]">'; // highest resolution image
const output = await posthtml().use(retinate()).process(inputHTML);

const outputHTML = output.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">