sizes logic is not clear

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.

Start with the linked Nuxt Image sizes documentation and the NuxtImg examples in this issue. Trace how the documented breakpoints produce the shown sizes, srcset widths, and src fallback, then update the documentation so the sizing rules and generated values are unambiguous.