Feature request: Add width/height attributes only

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.

@nhoizey

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

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

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.

Related to #133, should probably be implemented together!

Just dropping in here to list a few other features that have dropped, marginally related here:

Also worth mentioning the HTML Relative Passthrough File Copy feature: https://www.11ty.dev/docs/copy/#copy-a-file-alongside-a-template (it doesn’t add attributes but does perform the copy).

I would also shout out the svgShortCircuit feature which acts on the size difference of input versus output: https://www.11ty.dev/docs/plugins/image/#skip-raster-formats-for-svg

@nhoizey

Just to be clear and answer your question @nhoizey (very late) the plugin has an in-memory cache that de-dupes requests so it shouldn’t have duplication for the same input/output in the way you suggest!

A new special formats option "passthrough" will now copy the file to output without sharp processing. This is different from "auto" which just reuses the same input format as output (but still does sharp processing). You can use alongside other formats too, if you want (though you probably wouldn’t want to). Tested that "passthrough" was about 20× faster than formats: ["auto"] on a local benchmark.

Global use

$config.addPlugin(eleventyImageTransformPlugin, {
  formats: ["passthrough"],
});

<img src="photo.jpg" alt="…">

Renders:
<img src="/post/KkPMmHd3hP.jpeg" alt="…" width="1280" height="853">

One-off use

Works with eleventy:formats in the transform plugin too:

$config.addPlugin(eleventyImageTransformPlugin);

<img src="photo.jpg" eleventy:formats="passthrough" alt="…">

Renders:
<img src="/post/KkPMmHd3hP.jpeg" alt="…" width="1280" height="853">

Shipping with v7.0.0-alpha.5

Fixes 11ty#212. Adds `passthrough` special format that skips sharp pr…

Update dependency @11ty/eleventy-img to v7 (#515)

Navigation Menu

Repository navigation

Feature request: Add width/height attributes only #212

Global use

One-off use

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Feature request: Add width/height attributes only #212

Description

Activity

zachleat commented on Feb 12, 2024

simevidas commented on Feb 12, 2024

nhoizey commented on Feb 12, 2024

zachleat commented on Dec 13, 2024

zachleat commented on Jul 24, 2026

zachleat commented on Jul 24, 2026

zachleat commented on Jul 25, 2026

Global use

One-off use

zachleat commented on Jul 25, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions