Improve sizes handling for mobile-first

[MielPoule]

As v.0.4.9, we need to specify a size for every type of screen even if the size is the same. E.g. for an image that is always 100% of the screen : sizes="xs:100vw sm:100vw md:100vw lg:100vw xl:100vw 2xl:100vw" If not, only the srcset of the specified screen will be generated.

We could automatically generate other srcset with a mobile-first rule.

For exemple: If we specify only sizes="100vw", we loop through every screens size to generate appropriate srcset. If we specify sizes="100vw xl:400px", we loop through every screens size under xl to generate srcset with screen width and then for xl and larger we generate 400px srcset. etc

Would it make sense ?

[pi0]

Hi @MielPoule. Seems a nice idea. We (with @Atinux) was thinking about something similar for fluid behavior. It seems to me a more generic shortcut with sizes="xvw" considering it fluid. In contrast sizes="fluid:x" seems easier to implement and less risky against API breaking changes...

[reneroth]

Should be easy enough to rig something up by writing a slim wrapper component for nuxt-image, right?

Then manually setting the sizes prop to the specified one, maybe even dynamically reading from the module config which sizes are available.

[iBobik]

I’ve created helper for this.

# plugins/const.ts
export default defineNuxtPlugin(() => {
  return {
    provide: {
      allSizes: 'xs:100vw sm:100vw md:100vw lg:100vw xl:100vw 2xl:100vw',
    }
  }
})

<NuxtImg src="/image.jpg" :sizes="$allSizes" />