Feature request: Add width/height attributes only

[zachleat]

I needed a plugin that adds width/height attributes to the elements in my Markdown blog posts. Nothing else, no optimization or anything.

https://mastodon.social/@simevidas/111918982599300045

The transform plugin is close to this if you use formats: ["auto"], e.g.:

import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";

export default function(eleventyConfig) {
	eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
		extensions: "html",
		formats: ["auto"],
	});
};

Would be a good opt-in enhancement to the transform plugin to bypass sharp processing altogether.

[zachleat]

Also a shout out to this plugin linked up in the replies by @nhoizey https://github.com/boyum/markdown-it-image-size

[simevidas]

Looks like eleventyImageTransformPlugin requires Eleventy 3 which is still in alpha. I’ll test this code once version 3 is in beta.

[nhoizey]

Thinking out loud…

The advantage of the markdown-it plugin is that it will get the image dimensions once (I guess) even if the content with this image is shown in 5 HTML pages.

A transform based on HTML will probably get the image dimensions 5 times instead of 1, but there could be a cache of image dimensions based on the image file path.

What if there is a crop of the image in some of the HTML pages, based on responsive needs (I'm not sure eleventy-img allows that 🤔), so the resulting images have different dimensions in the different HTML pages? The markdown-it plugin doesn't seem to be the right solution here.