posthtml-img-autosize

PostHTML plugin that automatically sets width and height of <img>. It supports JPG, PNG, GIF, BMP, TIFF, SVG, and WebP. It autosizes both local and remote images.

Usage

By default the plugin will autosize only images with width="auto" and height="auto":

var posthtml = require('posthtml');

posthtml([require('posthtml-img-autosize')()])
    .process('<img src="https://github.com/posthtml/posthtml-img-autosize/raw/master/photo.png" width="auto" height="auto"><img src="https://github.com/posthtml/posthtml-img-autosize/raw/master/user.jpg">')
    .then(function (result) {
        console.log(result.html);
    });

// <img src="https://github.com/posthtml/posthtml-img-autosize/raw/master/photo.png" width="111" height="52">
// <img src="https://github.com/posthtml/posthtml-img-autosize/raw/master/user.jpg">

But if you set processEmptySize: true, the plugin will autosize all images with undefined or empty width and height:

posthtml([
        require('posthtml-img-autosize')({
            root: './', // Path to images base directory (default: './')
            processEmptySize: true
        })
    ])
    .process('<img src="https://github.com/posthtml/posthtml-img-autosize/raw/master/photo.png" width="auto" height="auto"><img src="https://github.com/posthtml/posthtml-img-autosize/raw/master/user.jpg">')
    .then(function (result) {
        console.log(result.html);
    });

// <img src="https://github.com/posthtml/posthtml-img-autosize/raw/master/photo.png" width="111" height="52">
// <img src="https://github.com/posthtml/posthtml-img-autosize/raw/master/user.jpg" width="100" height="201">

Image versioning

If you use ?.. for image versioning in your HTML you should set questionMarkAsVersion: true in the config:

posthtml([
        require('posthtml-img-autosize')({
            questionMarkAsVersion: true
        })
    ])
     // The image file has "photo.png" name
    .process('<img src="https://github.com/posthtml/posthtml-img-autosize/raw/master/photo.png?v=2" width="auto" height="auto">')
    .then(function (result) {
        console.log(result.html);
    });

// <img src="https://github.com/posthtml/posthtml-img-autosize/raw/master/photo.png?v=2" width="111" height="52">

Without that option the plugin would search for a file with name photo.png?v=2 on your disk.

Error handling

You can use the usual Promise.catch() to handle errors:

posthtml([require('posthtml-img-autosize')()])
    .process('<img src="https://github.com/posthtml/posthtml-img-autosize/raw/master/notExists.jpg" width="auto" height="auto">')
    .then(function (result) {
        // ...
    })
    .catch(function (error) {
        console.log(error.message);
    });

// ENOENT: no such file or directory, open '/notExists.jpg'