Add Eleventy transform plugin to automatically optimize image output

[zachleat]

This would alleviate any need for asynchronous/synchronous shortcodes and wouldn’t require any need for markdown plugins et al.

Reuse the transform methods for the HTML <base> plugin and the InputPath to URL plugins.

https://www.11ty.dev/docs/plugins/inputpath-to-url/
https://www.11ty.dev/docs/plugins/html-base/

Related to 11ty/eleventy#3194

[zachleat]

https://posthtml.org/#/plugins/README?id=asynchronous-with-promises

[zachleat]

This feature will require @11ty/eleventy@3.0.0-alpha.5 or newer.

You can get finer grained control over the images by adding HTML attributes:

• <img eleventy:ignore>: skips processing an image.
• <img eleventy:formats>: override the default formats.
• <img eleventy:widths>: override the default widths.
• <img eleventy:output>: override the output directory (absolute paths are relative to the Eleventy output directory, relative paths are relative to the template’s URL).

Opt-in to this plugin via:

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

export default function(eleventyConfig) {
	eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
		// which file extensions to process
		extensions: "html",
		// optional, output image formats
		formats: ["avif", "webp", "auto"],
		// optional, output image widths
		// widths: ["auto"],

		// optional, attributes assigned on <img> override these values.
		defaultAttributes: {
			loading: "lazy",
			decoding: "async"
		}
	});
};

[zachleat]

Docs deploying to https://www.11ty.dev/docs/plugins/image/#eleventy-transform