Nuxt Picture ignores width in request

[samanthaming]

When I set the width for <nuxt-img>, it will make a request passing the corresponding width (two.jpg?w=200). However, when I tried it with <nuxt-picture>, it seems to ignore this and pass some larger width (one.jpg?w=1536).

<nuxt-picture src="img/one.jpg" width="200" />
<nuxt-img src="img/two.jpg" width="200" />

Not sure if this is a bug 🐛 or this is the expected behaviour 🤔. If it's the latter, is there any suggestion on how I can set the width when using <nuxt-picture>, so it's passed in the request. (ie. one.jpg?w=200&f=webp)? Thanks 🙂

[NavaneethVijay]

@samanthaming generates a picture tag with source and img tag with predefined screen sizes mentioned here Module Options. Since your screen size falls under 1536px you are seeing the request sent for 1536. while the width=200 is applied to the img tag rather than the image resource. Not sure if can make sense with width and height options.

[pi0]

This is true. width and height properies of nuxt-picture are mainly used to calculate aspect ratio. If sizes prop is missing for nuxt-picture, it falls back to all available screen sizes generating based on aspect ratio for responsive behavior (documentation missing)

[NavaneethVijay]

@pi0 However in this case <nuxt-picture format="webp" src="/images/colors.jpg" sizes="sm:100vw md:50vw lg:400px" width="500" height="500" /> we are resizing a 400x400 image to 500x500 at large screens which will impact pagespeed scores web.dev Better approach would be using the width and height value for calculating aspect ratio and reserving the space instead of using width and height attribute in the image. We do not need sizes attribute since its generating the same image with same aspect ratio, we can probaby have a density option mentioned here which can improve the image qulaity on retina display etc.

[pi0]

Hi @NavaneethVijay. I've made #268 to avoid scaling up generated widths in srcset. Reason we keep width / height props in rendered HTML, is to hint browser about aspect ratio (before original image getting loaded, browser can preserve space, without them it can't and leads to layout shift)

[MoogyG]

This is true. width and height properies of nuxt-picture are mainly used to calculate aspect ratio. If sizes prop is missing for nuxt-picture, it falls back to all available screen sizes generating based on aspect ratio for responsive behavior (documentation missing)

Yes it should be nice to point it out in documentation.