Bug in NuxtImg sizes configuration: Incorrect default size assignment

[sparrow-chik-chrk]

Description

There seems to be a misconfiguration issue with how NuxtImg handles the sizes attribute, particularly with the assignment of default and conditional sizes based on breakpoints.

Issue

According to the documentation, the sizes attribute should allow a space-separated list where each entry specifies a screen size/width pair. The behavior should be that if no screen size prefix is used (like sm:), then that size is taken as the default. However, when specifying sizes as in the example below, the actual behavior observed does not match the expected:

<NuxtImg
  src="/logos/nuxt.png"
  sizes="100vw sm:50vw md:400px"
/>

Expected behavior:

• The default size should be 100vw
• sm:50vw should apply for sm screens and above until the next breakpoint
• md:400px should apply from md screens and above

Actual behavior:

• sm screens use 100vw
• md screens use 50vw
• The default size for other screens is set to 400px

This leads to inconsistent and unexpected image sizing across different device breakpoints.

[danielroe]

This is expected behaviour. Like tailwind responsive prefixes, the 'default' value applies to all configurations, then sm: and md: specify behaviour for small (and up) and medium (and up).

See #977.

[sparrow-chik-chrk]

Either you didn't understand me, or I don't even know.
It's written in the documentation.

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.

That is, it is planned that for such a configuration
100vw sm:50vw md:400px

100vw will be for everyone, sm:50vw - the sm prefix for 50vw, md:400px - the md prefix for 400px

in HTML, it should look something like
(max-width: sm) 50vw, (max-width: md) 400px, 100vw

but in fact, the pairs are created not through ":", but through a space, and are separated by ":".
and the result we have is
(max-width: sm) 100vw, (max-width: md) 50vw, 400px

I tested many times, check it yourself. Either the documentation is incorrect, or the logic

[danielroe]

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.

This means that for the following configuration:

100vw sm:50vw md:400px

the output should be (min-width: sm) 50vw, (min-width: md) 400px, 100vw

The key phrases are 'up until' and 'and up'. If you think the docs are unclear, I would love to hear your suggestions for improving them. 🙏

[sparrow-chik-chrk]

Sorry, my English isn't good enough, and translators sometimes lose context. I only now understood what you were talking about.
Perhaps if you added to this phrase "Each specified size pair applies up - so md:400px means that the image will be sized 400px on md screens and up." something like "on screens smaller than md, 100vw will be used", it would have been clearer to me.

Thank you for clarifying.