Image size

Description

This plugin generate the width and height attributes of the images which is recommended to prevent layout shift.

Installation

Import this plugin in your _config.ts file to use it:

import lume from "lume/mod.ts";
import imageSize from "lume/plugins/image_size.ts";

const site = lume();

site.use(imageSize());

export default site;

Add the image-size attribute to the images you want the plugin to calculate the size:

<img src="/image.png" image-size>

And the plugin automatically adds the width and height attributes:

<img src="/image.png" width="600" height="300">