.eleventy.config.images.js

const path = require("path");
const eleventyImage = require("@11ty/eleventy-img");

const markdownIt = require('markdown-it');
const markdownItEleventyImg = require("markdown-it-eleventy-img");

module.exports = eleventyConfig => {
	function relativeToInputPath(inputPath, relativeFilePath) {
		let split = inputPath.split("/");
		split.pop();

		return path.resolve(split.join(path.sep), relativeFilePath);
	}

	// Eleventy Image shortcode
	// https://www.11ty.dev/docs/plugins/image/
	eleventyConfig.addAsyncShortcode("image", async function imageShortcode(src, alt, widths, sizes) {
		// Full list of formats here: https://www.11ty.dev/docs/plugins/image/#output-formats
		// Warning: Avif can be resource-intensive so take care!
		let formats = ["avif", "webp", "auto"];
		let file = relativeToInputPath(this.page.inputPath, src);
		let metadata = await eleventyImage(file, {
			widths: widths || ["auto"],
			formats,
			outputDir: path.join(eleventyConfig.dir.output, "img"), // Advanced usage note: `eleventyConfig.dir` works here because we’re using addPlugin.
		});

		// TODO loading=eager and fetchpriority=high
		let imageAttributes = {
			alt,
			sizes,
			loading: "lazy",
			decoding: "async",
		};
		return eleventyImage.generateHTML(metadata, imageAttributes);
	});

	eleventyConfig.setLibrary("md", markdownIt({
    html: true,
    breaks: true,
    linkify: true
  })
  .use(markdownItEleventyImg, {
		resolvePath: (filepath, env) => path.join(path.dirname(env.page.inputPath), filepath),
		imgOptions: {
			widths: [800, 500, 300],
			urlPath: "/images/",
			outputDir: path.join("_site", "images"),
			formats: ["avif", "webp", "jpeg"]
		},
		globalAttributes: {
			class: "markdown-image",
			decoding: "async",
			// If you use multiple widths,
			// don't forget to add a `sizes` attribute.
			sizes: "100vw"
		}
	}));

};