diff --git a/README.md b/README.md
index d6a79e9..2b892fa 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,12 @@ A starter repository showing how to build a blog with the [Eleventy](https://www
 - Easily [deploy](#deploy-this-to-your-own-site) to various hosting providers.
 - Live reload provided by [Eleventy Dev Server](https://www.11ty.dev/docs/dev-server/).
 - Content-driven [hierarchical navigation](https://www.11ty.dev/docs/plugins/navigation/)
-- Automated [image optimization](https://www.11ty.dev/docs/plugins/image/) via the `{% image %}` shortcode (images can be co-located with posts) (with zero-JavaScript output).
+- [Image optimization](https://www.11ty.dev/docs/plugins/image/) (including modern formats AVIF and WebP) via the `{% image %}` shortcode (images can be co-located with posts) (with zero-JavaScript output).
+	- Prefers `<img>` if possible (single image format) but switches automatically to `<picture>` for multiple image formats.
+	- Automated `<picture>` syntax markup with `srcset` and optional `sizes`
+	- Includes `width`/`height` attributes to avoid [content layout shift](https://web.dev/cls/).
+	- Includes `loading="lazy"` for native lazy loading without JavaScript.
+	- Includes [`decoding="async"`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decoding)
 - Built-in [syntax highlighter](https://www.11ty.dev/docs/plugins/syntaxhighlight/) (with zero-JavaScript output).
 - Draft posts: use `draft: true` to mark a blog post as a draft. Drafts are **only** included during `--serve`/`--watch` and are excluded from full builds.
 - Automated next/previous links on blog posts.
diff --git a/eleventy.config.images.js b/eleventy.config.images.js
index 98a9139..32a0269 100644
--- a/eleventy.config.images.js
+++ b/eleventy.config.images.js
@@ -11,14 +11,18 @@ module.exports = eleventyConfig => {
 
 	// Eleventy Image shortcode
 	// https://www.11ty.dev/docs/plugins/image/
-	eleventyConfig.addAsyncShortcode("image", async function imageShortcode(src, alt, sizes) {
+	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: ["auto"],
-			// You can add "avif" or "jpeg" here if you’d like!
-			formats: ["webp", "png"],
+			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,