From: Cameron Otsuka <cameron@otsuka.haus>
Date: Fri, 28 Feb 2025 22:26:38 +0000 (-0800)
Subject: align image size attribute with generated widths
X-Git-Tag: v1.0.0~37
X-Git-Url: https://git.otsuka.systems/?a=commitdiff_plain;h=90ba4e3bf277b22ebdc1c30badfc93b941cdb1f1;p=cotsuka.github.io

align image size attribute with generated widths
---

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": "",