`eleventy:widths` should supersede `width`?

[zachleat]

Warning: If width attribute is provided (like ), it will be used to generate the image (only one image with mentioned width) and values in eleventy:widths will be ignored. You should remove width if you plan to use eleventy:widths

via https://saneef.com/blog/sunsets-eleventy-plugin-img2picture/ via @saneef

[saneef]

The width and height attributes in <img> are provided by many as a best practice for reasons like to avoid CLS. And, it is highly likely they use full-width images (responsive) where the final dimensions are governed by the CSS.

Between eleventy:widths and width, I believe people will likely expect eleventy:widths to have precedence. The primary reasoning: eleventy:widths is something we specify additionally, and we likely expect the additional or special things given to be treated with importance.

I’m stretching the question a bit further: do we need to consider the value specified in width to resize the image?

With width, we have three ways to specify widths:

• widths in the options of the Image Transform plugin
• <img width> at individual image tag
• <img eleventy:widths>, also at an individual tag level

Like I had noted in the beginning, the width attribute specified in the image tag doesn’t have much relation to the final dimension of the image. Because of high-resolution screens, we likely provide images at 2x or 3x sizes. It doesn’t make sense to shrink to 1x based on the width provided (assuming the user uses 1x dimension for aspect ratio calculation).

My suggestion is not to consider width in generating image sizes. Rather be explicit through global options or <img eleventy:widths> at an individual tag level.

Also, we should continue to populate the width and height attributes if they are missing in the original <img> tag.