Add "class" attribute to Eleventy Image Picture tag

[kubarenatioN]

Is your feature request related to a problem? Please describe.

As of versions

"@11ty/eleventy": "3.0.0-alpha.17",
"@11ty/eleventy-img": "^4.0.2", 

Eleventy Image Plugin generates the following output for <img /> tag:

So, as we see, initial image gets wrapped by <picture> tag with sources, in case there is 2+ formats for image provided in Image Plugin config. Refs:

• eleventy-img/src/generate-html.js

  Line 106 in 9a422e1

  values.filter(imageFormat => {

• https://www.11ty.dev/docs/plugins/image/#eleventy-transform

If there will be only one format, e.g. ['jpeg'] or ['webp'], eleventy will output initial <img> tag.

All this fine, until we start styling image with multiple formats using CSS class.
On the image attached above, we can observe class name hero__bg-image. The problem is that element with that class is wrapped by picture, so this makes it hard to style the whole image block.

For example, this css:

.hero__bg-image { width: 50% }

will make <img> box half of the size of the picture box, but not half of the container of the picture.

As was said above, such behavior makes it hard to style image by css classes.
Possible workarounds are to style by picture tag selector or using parent flexbox/grid layouts. Both options are kinda messy.

Describe the solution you'd like

I'd like to suggest adding some css class (configurable) for picture output, duplicating <img> tag class/classes but adding some prefix, for example "--picture"

Having
<img class="my-img">

with Eleventy Image Plugin transformation will output wrapping picture tag like this:

<picture class="my-img--picture"> 
 <img class="my-img">
</picture

Describe alternatives you've considered

No response

Additional context

Also, I'd like to discuss the following point – can we avoid using picture tag, and use just srcset and sizes attributes directly on the <img>?

I'm comparing it with NextJS, and they just use with huge srcset attr.
Correct me if I'm wrong, but we can specify different image formats in srcset tag.

[tarunsinghofficial]

Hi @kubarenatioN, Can I please work on this? If, yes please assign me this issue.

Thanks!

[kubarenatioN]

Hi, @tarunsinghofficial. Of course you can!
Unfortunately, I cannot assign the issue to anyone. May be @zachleat can assist on this...

[hottabov]

Hi guys! Any news about this issue?