feat!: screen based responsive

[pi0]

Currently, responsive prop is generating breakpoints by assuming image layout is fuild (filling screen width).

• Global sizes option replaced by screens
• Remove responsive attr from nuxt-img
• sizes attr for nuxt-picture and nuxt-img accept a new object
• Rename srcSet to srcset everywhere
• Computed value for srcset and sizes improved

Usage with <nuxt-img>:

<NuxtImg sizes="sm:100vw md:50vw lg:400px" />

Generates:

<img src="https://res.cloudinary.com/nuxt/image/upload/w_500/remote/nuxt-org/blog/going-full-static/main" alt="main" sizes="(max-width: 640px) 100px, 500px" srcset="https://res.cloudinary.com/nuxt/image/upload/w_100/remote/nuxt-org/blog/going-full-static/main 100w, https://res.cloudinary.com/nuxt/image/upload/w_500/remote/nuxt-org/blog/going-full-static/main 500w">

Default value for screens: (inspired by tailwind breakpoints)

{
    screens: {
      xs: 320,
      sm: 640,
      md: 768,
      lg: 1024,
      xl: 1280,
      xxl: 1536,
      '2xl': 1536
    },
}

Try locally

• Checkout branch
• yarn && yarn dev
• http://localhost:3000/responsive

[atinux]

I am looking for a way to support the generation of (max-width: 720px) 100vw, 720px

This mean the image will take the device size on small device (browser will get the closest image ratio defined from screens) and get the 720px for bigger screens.

[atinux]

The PR currently breaks nuxt-picture without specifying sizes prop (go to /picture page in the playground)

What if we support using a string as value, like this:

<nuxt-img sizes="{ md: '100vw', lg: 720 }" />

This would have the effect to generating:

<img src="/_ipx/images/damavand.jpg?w=800" sizes="(max-width: 768px) 100vw, 800px" srcset="/_ipx/images/damavand.jpg?w=640 640w, /_ipx/images/damavand.jpg?w=768 768w, /_ipx/images/damavand.jpg?w=800 800w">

When the value is 100vh, the browser will fetch the image closest to the current screen size (lower than 768px).

We would need to generate the image size for all breakpoints smaller and equal to the one specifying '100vh'. This is a tricky situation where we need a fluid image for tablet and a fixed image for desktop.

Another proposal:

<nuxt-img fluid sizes="{  lg: 720 }" />

fluid prop will be defaulted to '100', but can be defined with fluid="80" for image having 80% of the screen width.

If fluid + sizes are specified, then the first breakpoint defined will stop the fluid query.

[pi0]

@atinux Both good ideas. Just consider for fluid support we need:

1. A way to specify we want fuild behavior (by either flux prop or using string for one of the sizes)
2. A way to specify at which screen breakpoint (max-width as number or by name like md) we want to swtich to fluid layout
3. A way to specify %vw relation between fluid image and screen size (like 100 or 80)
4. Also as mentioned regarding tricky part, there might be more than one fluid breakpoint (tablet, desktop or orientation based) so we would need multiple values for fluid.

I would suggest an API like below:

<nuxt-img :fluid="{ lg: 60, md: 80, sm: 100 }" />

(fluid covers (1), md covers (2), 80 covers (3) and comma seperated values cover (4))

Alternative:

<nuxt-img :sizes="{ lg: 60, md: 80, sm: 100 }" fluid />

Generates:

<img src="img.jpg?w=614" 
sizes="(max-width: 640px) 100vw, (max-width: 768px) 80vw, 60vw"
srcset="img.jpg?w=640 640w, img.jpg?w=614 614w"
>

Remarks:

• sm = 640
• md = 768
• lg = 1024
• 640 * 1.0 = 640
• 768 * 0.8 = 614
• 1024 * 0.6 = 614
• (max-width: 1024px) for 60vw is omitted since it is fallback

Note: 614w variant is used only for fluid size of both md and lg since for lg screens we are using 60vw which is almost same as 80vw of md and ironically we are using bigger image for sm screen than bigger one