update image plugin

eleventy.config.images.js

@@ -1,50 +0,0 @@
-import path from "path";
-import EleventyImage from "@11ty/eleventy-img";
-
-function relativeToInputPath(inputPath, relativeFilePath) {
-	let split = inputPath.split("/");
-	split.pop();
-
-	return path.resolve(split.join(path.sep), relativeFilePath);
-
-}
-
-function isFullUrl(url) {
-	try {
-		new URL(url);
-		return true;
-	} catch(e) {
-		return false;
-	}
-}
-
-export default function(eleventyConfig) {
-	// 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
-		let formats = ["webp", "jpeg"];
-		let input;
-		if(isFullUrl(src)) {
-			input = src;
-		} else {
-			input = relativeToInputPath(this.page.inputPath, src);
-		}
-
-		let metadata = await EleventyImage(input, {
-			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);
-	});
-};

eleventy.config.js

@@ -7,13 +7,13 @@ import pluginBundle from "@11ty/eleventy-plugin-bundle";
 import pluginNavigation from "@11ty/eleventy-navigation";
 
 import { EleventyHtmlBasePlugin } from "@11ty/eleventy";
+import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
 
 
 import pluginDrafts from "./eleventy.config.drafts.js";
-import pluginImages from "./eleventy.config.images.js";
 
 /** @param {import('@11ty/eleventy').UserConfig} eleventyConfig */
-export default function (eleventyConfig) {
+export default async function (eleventyConfig) {
 	// Copy the contents of the `public` folder to the output folder
 	// For example, `./public/css/` ends up in `_site/css/`
 	eleventyConfig.addPassthroughCopy({
@@ -29,7 +29,10 @@ export default function (eleventyConfig) {
 
 	// App plugins
 	eleventyConfig.addPlugin(pluginDrafts);
-	eleventyConfig.addPlugin(pluginImages);
+	eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
+		extensions: "html",
+		formats: [ "auto" ],
+	})
 
 	// Official plugins
 	eleventyConfig.addPlugin(pluginRss);

package.json

@@ -21,8 +21,7 @@
 	},
 	"dependencies": {
 		"@11ty/eleventy": "^3.0.0",
-		"@11ty/eleventy-img": "^3.1.1",
-		"@11ty/eleventy-upgrade-help": "^3.0.1"
+		"@11ty/eleventy-img": "^4.0.2"
 	},
 	"devDependencies": {
 		"@11ty/eleventy-navigation": "^0.3.5",