Is there an attribute override for `sizes`?

[robole]

In the section Attribute Override, I do not see an entry for overriding the sizes attribute on a case-by-case basis. I tried using eleventy:sizes and it does appear to work. Is this an existing feature that has not been documented? Or is it not supported?

The desired behavior is the same as the usage of eleventy:widths e.g. <img eleventy:widths="200,600">.

Example tried in using eleventy:sizes

In the eleventy config:

import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";

export default async function (eleventyConfig) {
  
  // plugin
 let options = {
    "outputDir": "img",
    "formats": ["svg", "webp"],
    "widths": [600, 1200, "auto"],
    "defaultAttributes": {
      "sizes": "(max-width: 1024px) 100dvw, 1600px",
      "loading": "lazy",
      "decoding": "async"
    };

  eleventyConfig.addPlugin(eleventyImageTransformPlugin, options);
}

In a template, nunjucks in this case,

<img src={{ book.localCover }}"  alt="" eleventy:widths="300, 600, auto" eleventy:sizes="(max-width: 599px) 100dvw, 600px" />

Current behaviour

Currently, it uses the value for sizes provided in the eleventy config. It does not override it from the template.

<img
                  src="/img/UV9QyH6-sP-300.webp"
                  alt=""
                  loading="eager"
                  decoding="async"
                  width="849"
                  height="1200"
                  srcset="
                    /img/UV9QyH6-sP-300.webp 300w,
                    /img/UV9QyH6-sP-600.webp 600w,
                    /img/UV9QyH6-sP-849.webp 849w
                  "
                  sizes="(max-width: 1024px) 100dvw, 1600px"
 />

Desired behaviour

Use the value provided in the template. The ouput would be:

<img
                  src="/img/UV9QyH6-sP-300.webp"
                  alt=""
                  loading="eager"
                  decoding="async"
                  width="849"
                  height="1200"
                  srcset="
                    /img/UV9QyH6-sP-300.webp 300w,
                    /img/UV9QyH6-sP-600.webp 600w,
                    /img/UV9QyH6-sP-849.webp 849w
                  "
                  sizes="(max-width: 599px) 100dvw, 600px"
 />

---

Thank you for hard work on improving this plugin!