Sizes should be optional

[SimonBackx]

Correct me if I'm wrong, but for a <picture> element in HTML, you don't need the sizes property. A browser can choose which srcset is best, using the real rendered size of the image. So when you define the size of the image in CSS, which you probably should do to avoid any jumping during the image loading, everyhing will just 'work'.

The decision of the browser is probably the best one, because the browsers exactly knowns how large or small the images will be rendered, what the pixel density is and whether the user is connected to wifi, 4G, edge...

Wouldn't it be an option to just define all the expected sizes for an image, without using the 'screens' property? Also there is no real documentation about the 'screens' and 'sizes' settings and how they work, apart from some vague sentences. So that would also be an improvement. E.g. I don't understand how the modifiers (where you can only specify one width and height) works together with 'sizes'. What is the point of defining them both, e.g. <nuxt-picture width="20" height="20" sizes="..." />, and what happens under the hood in choosing the generated sizes?

Thank you for all the work, would be nice if I could help improving this package!

sizes

Specify responsive sizes.

This a space-separated list of screen size/width pairs. You can see a list of the defined screen sizes here ).

[hyvyys]

sizes is required. https://cloudfour.com/thinks/responsive-images-101-part-5-sizes/ I'm not sure why it is so but I suspect it's because you want the browser to download the image as fast as possible.

What is wrong is that the sizes prop on nuxt-img decides both the value of the sizes attribute on img and what sizes are generated by nuxt/image, when in the real world these two aspects do not need to have anything in common. What is worse, it seems sizes cannot be specified in a preset, trying to do so results in the following (the spaces from the option value encoded into the attribute):

<img src="/_ipx/sizes_xs:100vw%20sm:100vw%20md:100vw%20lg:100vw%20xl:100vw%20xxl:100vw/assets/img/image.jpg">

Ideally, I would like to have a couple of presets, e.g. 'cover', that always generate a set of sizes, e.g. 320w, 640w, 1200w, 2560w, and be able to set the image's sizes independently, e.g. to a single value 100vw.

Currently, I'd need to specify sizes on each image and I'm left with cluttered HTML. This:

<img src="/_ipx/w_2560/assets/img/image.jpg" sizes="(max-width: 380px) 100vw, (max-width: 760px) 100vw,
(max-width: 768px) 100vw, (max-width: 1280px) 100vw, (max-width: 1680px) 100vw, 100vw"
srcset="/_ipx/w_380/assets/img/image.jpg 380w, /_ipx/w_760/assets/img/image.jpg 760w,
/_ipx/w_768/assets/img/image.jpg 768w, /_ipx/w_1280/assets/img/image.jpg 1280w,
/_ipx/w_1680/assets/img/image.jpg 1680w, /_ipx/w_2560/assets/img/image.jpg 2560w">

could very well look like this instead:

```html
<img src="/_ipx/w_2560/assets/img/image.jpg" sizes="100vw"
srcset="/_ipx/w_380/assets/img/image.jpg 380w, /_ipx/w_760/assets/img/image.jpg 760w,
/_ipx/w_768/assets/img/image.jpg 768w, /_ipx/w_1280/assets/img/image.jpg 1280w,
/_ipx/w_1680/assets/img/image.jpg 1680w, /_ipx/w_2560/assets/img/image.jpg 2560w">

[luksak]

Here is a very similar issue: #462

[toddpadwick]

Agreed. Although having sizes does help the browser to pre-calculate what size to use before the page is rendered, knowing the sizes is not always possible as we don't often know where a component might be placed and instead having an image with just a list of srcsets for the browser to self assign, is the next best thing. And with browsers becoming more advanced, this is actually become more acceptable too.