Skip to content
Automatically add image size attributes in HTML
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.editorconfig
.gitignore
.rollup.js
.tape.js
.travis.yml
CHANGELOG.md
CONTRIBUTING.md
INSTALL.md
LICENSE.md
README.md
package.json

README.md

pHTML Image Size pHTML

NPM Version Build Status Support Chat

pHTML Image Size lets you automatically add image size attributes in HTML.

<img src="image-600x400.jpg">

<!-- becomes -->

<img src="image-600x400.jpg" width="600" height="400" intrinsicsize="600x400">

Usage

Transform HTML files directly from the command line:

npx phtml source.html output.html -p @phtml/image-size

Node

Add pHTML Image Size to your project:

npm install @phtml/image-size --save-dev

Use pHTML Image Size to process your HTML:

const phtmlImageSize = require('@phtml/image-size');

phtmlImageSize.process(YOUR_HTML /*, processOptions, pluginOptions */);

Or use it as a pHTML plugin:

const phtml = require('phtml');
const phtmlImageSize = require('@phtml/image-size');

phtml([
  phtmlImageSize(/* pluginOptions */)
]).process(YOUR_HTML /*, processOptions */);

pHTML Image Size runs in all Node environments, with special instructions for:

Node CLI Eleventy Gulp Grunt

Options

size

The size option determines how width and height attributes are handled. By default, the option is set to "auto".

size: auto

When size is "auto", images with both width and height attributes set as something other than auto will be ignored.

<img src="image-600x400.jpg" width="600" height="400">
<!-- becomes -->
<img src="image-600x400.jpg" width="600" height="400">

Then, images with only one width or height attribute set as something other than auto will have their corresponding attribute set with the corresponding aspect ratio.

<img src="image-600x400.jpg" height="200">
<img src="image-600x400.jpg" width="1200" height="auto">
<!-- becomes -->
<img src="image-600x400.jpg" width="300" height="200">
<img src="image-600x400.jpg" width="1200" height="800">

Then, images with both width or height attributes missing or set as auto will have both attributes set with the image original size.

<img src="image-600x400.jpg">
<!-- becomes -->
<img src="image-600x400.jpg" width="600" height="400">

size: intrinsic

When size is "intrinsic", images will always have their width and height attributes set with the intrinsic size of the image.

<!-- when { size: "intrinsic" } -->
<img src="image-600x400.jpg">
<img src="image-600x400.jpg" width="300">
<img src="image-600x400.jpg" width="1200" height="auto">
<!-- becomes -->
<img src="image-600x400.jpg" width="600" height="400">
<img src="image-600x400.jpg" width="600" height="400">
<img src="image-600x400.jpg" width="600" height="400">

size: remove

When size is "remove", all width and height attributes are removed.

<!-- when { size: "remove" } -->
<img src="image-600x400.jpg">
<img src="image-600x400.jpg" width="300">
<img src="image-600x400.jpg" width="1200" height="auto">
<!-- becomes -->
<img src="image-600x400.jpg">
<img src="image-600x400.jpg">
<img src="image-600x400.jpg">

size: ignore

When size is "ignore", all width and height attributes are ignored.

<!-- when { size: "ignore" } -->
<img src="image-600x400.jpg">
<img src="image-600x400.jpg" width="300">
<img src="image-600x400.jpg" width="1200" height="auto">
<!-- becomes -->
<img src="image-600x400.jpg">
<img src="image-600x400.jpg" width="300">
<img src="image-600x400.jpg" width="1200" height="auto">

intrinsicsize

The intrinsicsize option determines how the intrinsicsize attribute is handled. By default, the option is set to "auto".

intrinsicsize: auto

When intrinsicsize is "auto", images with a missing intrinsicsize attribute will have it added.

<img src="image-600x400.jpg">
<!-- becomes -->
<img src="image-600x400.jpg" intrinsicsize="600x400">

intrinsicsize: intrinsic

When intrinsicsize is "intrinsic", images will always have their intrinsicsize attribute set with the intrinsic size of the image.

<img src="image-600x400.jpg">
<img src="image-600x400.jpg" intrinsicsize="300x200">
<!-- becomes -->
<img src="image-600x400.jpg" intrinsicsize="600x400">
<img src="image-600x400.jpg" intrinsicsize="600x400">

intrinsicsize: remove

When intrinsicsize is "remove", the intrinsicsize attribute is removed.

<img src="image-600x400.jpg">
<img src="image-600x400.jpg" intrinsicsize="600x400">
<!-- becomes -->
<img src="image-600x400.jpg">
<img src="image-600x400.jpg">

intrinsicsize: ignore

When intrinsicsize is "ignore", the intrinsicsize attribute is ignored.

<img src="image-600x400.jpg">
<img src="image-600x400.jpg" intrinsicsize="600x400">
<!-- becomes -->
<img src="image-600x400.jpg">
<img src="image-600x400.jpg" intrinsicsize="600x400">

path

The path option determines the path or paths used to resolve image sources. By default, images are resolved relative to the path of their HTML file.

<!-- resolved as `/path/to/image-600x400.jpg` within `path/to/index.html` -->
<img src="image-600x400.jpg">
<!-- when { path: '/another/path' } -->
<!-- resolved as `/another/path/image-600x400.jpg`, or -->
<!-- resolved as `/path/to/image-600x400.jpg` within `path/to/index.html` -->
<img src="image-600x400.jpg">

Image sources resolve in the order they are specified.

<!-- when { path: ['/another/path', '/and/another'] } -->
<!-- resolved as `/another/path/image-600x400.jpg`, or -->
<!-- resolved as `/and/another/image-600x400.jpg`, or -->
<!-- resolved as `/path/to/image-600x400.jpg` within `path/to/index.html` -->
<img src="image-600x400.jpg">
You can’t perform that action at this time.