sizes logic is not clear

[razbakov]

From documentation:

By default Nuxt generates responsive-first sizing.

• If you omit a screen size prefix (like sm:) then this size is the 'default' size of the image. Otherwise, Nuxt will pick the smallest size as the default size of the image.
• This default size is used up until the next specified screen width, and so on. Each specified size pair applies up - so md:400px means that the image will be sized 400px on md screens and up.

100vw sm:50vw md:400px

Example provided in documentation:

<NuxtImg
  src="demo.jpg"
  sizes="100vw sm:50vw md:400px"
/>

Original size of demo.jpg is 2048 × 1068.

It renders as:

<img 
  sizes="(max-width: 640px) 100vw, (max-width: 768px) 50vw, 400px"
  srcset="
/_ipx/w_1/demo.jpg 1w,
/_ipx/w_2/demo.jpg 2w, 
/_ipx/w_320/demo.jpg 320w, 
/_ipx/w_400/demo.jpg 400w, 
/_ipx/w_640/demo.jpg 640w, 
/_ipx/w_800/demo.jpg 800w" 
  src="/_ipx/w_800/demo.jpg">

Why so many images are generated? It's not clear from documentation how it is suppose to work. Intuitively I would expect either amount of sizes specified equals to images generated, or images that needed based on sizes + breakpoints.

What means "responsive-first sizing"? Mobile first? So "100vw" is for mobile?

So we have the following default breakpoints:

• 'xs': 320,
• 'sm': 640,
• 'md': 768,
• 'lg': 1024,
• 'xl': 1280,
• '2xl': 1536

Asuming it's sizes + breakpoints:

• 100vw - image with 100% width for <640px screens - 320px, 640px
• sm:50vw - image with 50% width for <768px screens - 384px
• md:400px - image with 400px for screens >768px - 400px

Where are 1w, 2w, 800w coming from? None of them are needed.
Also why src is 800px?

sm:200px md:400px

Here is another example:

<NuxtImg src="/demo.jpg" sizes="sm:200px md:400px" />

<img
  sizes="(max-width: 768px) 200px, 400px"
  srcset="
/_ipx/w_200/demo.jpg 200w, 
/_ipx/w_400/demo.jpg 400w,
/_ipx/w_800/demo.jpg 800w" 
  src="/_ipx/w_800/demo.jpg">

I expect here to be only 200 and 400. Why 800 is added? Why 800 is set for src?

sm:100vw md:100vw

<NuxtImg src="/demo.jpg" sizes="sm:100vw md:100vw" />

<img
  sizes="(max-width: 768px) 100vw, 100vw"
  srcset="
/_ipx/w_640/demo.jpg 640w,
/_ipx/w_768/demo.jpg 768w,
/_ipx/w_1280/demo.jpg 1280w,
/_ipx/w_1536/demo.jpg 1536w"
  src="/_ipx/w_1536/demo.jpg">

Here I would expect md to be the biggest image and the following images generated: 320, 640, 768.
Also why src is 1536px? According to documentation it should take the smallest.
Smallest defined size is sm (640), and smallest breakpoint is xs (320).

100vw

<NuxtImg src="/demo.jpg" sizes="100vw" />

<img
  srcset="/_ipx/w_1/demo.jpg 1w, /_ipx/w_2/demo.jpg 2w"
  sizes="100vw"
  src="/_ipx/w_2/demo.jpg">

Where are 1w, 2w coming from? Also why src is 2px?
Here I would expect same amount of images as screens defined: 320, 640, 768, 1024, 1280, 1536.

[razbakov]

I just figured out where extra sizes are coming from. The default densities="1x 2x". I thought densities aren't working together with sizes. I tried densities="" and it didn't change anything, only densities="1x" makes a difference.

It took me long to realize that when sizes aren't set densities generate x-values in srcsets, but when sizes are defined it generates w-values.

The x-values are considered to be Antipattern: Explicit DPR. Don’t do this! It doesn’t actually give enough information to the browser to load the right image version. As it tells neither actual physical resolution of the image nor the intended display size, browsers cannot take the current viewport into account, only the physical density of the screen.

[razbakov]

The 1w and 2w issue is already addressed in #1433