From 90ba4e3bf277b22ebdc1c30badfc93b941cdb1f1 Mon Sep 17 00:00:00 2001
From: Cameron Otsuka <cameron@otsuka.haus>
Date: Fri, 28 Feb 2025 14:26:38 -0800
Subject: [PATCH] align image size attribute with generated widths

---
 eleventy.config.cjs | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/eleventy.config.cjs b/eleventy.config.cjs
index 6a2ac78..d6b26f1 100644
--- a/eleventy.config.cjs
+++ b/eleventy.config.cjs
@@ -128,6 +128,7 @@ module.exports = async function (eleventyConfig) {
 		const metadata = await eleventyImagePlugin(input, {
 			widths: [360, 720, 1440],
 			formats: ["svg", "avif", "jpeg", "gif"],
+			svgAllowUpscale: true,
 			sharpOptions: {
 				animated: true,
 				limitInputPixels: false,
@@ -135,9 +136,14 @@ module.exports = async function (eleventyConfig) {
 			urlPath: "/img/",
 			outputDir: path.join(eleventyConfig.dir.output, "img"),
 		});
+		const sizes = new Set(
+			Object.values(metadata).flatMap(format =>
+				Object.values(format).map(size => `${size.width}w`)
+			)
+		);
 		const imageAttributes = {
 			alt,
-			sizes: "360w, 720w",
+			sizes: Array.from(sizes).join(", "),
 			loading: "lazy",
 			decoding: "async",
 			"eleventy:ignore": "",
-- 
2.51.0