Nuxt picture is generating incorrect code.

[realandrew]

Edited: nuxt-picture is failing to resize certain formats properly.

Original below:

I'm using @nuxt/image-edge v1.0.0-27657146.da85542 with nuxt v3.0.0-rc.6 (both the latest versions at the time of writing). nuxt-picture is generating incorrect source elements. Notice (see below) in the source element inside picture it sets the type to webp but is still linking to jpg files.

My code looks like this:

<nuxt-picture
  :src="String(img)"
  preload
  loading="lazy"
  width="250"
  height="250"
  quality="80"
/>

Which generates the following:

<picture data-v-d9c38e5e="">
    <source type="image/webp" srcset="/_ipx/f_webp,q_80,s_320x320/headshot-cropped-1000x1000.jpg 320w, /_ipx/f_webp,q_80,s_640x640/headshot-cropped-1000x1000.jpg 640w, /_ipx/f_webp,q_80,s_768x768/headshot-cropped-1000x1000.jpg 768w, /_ipx/f_webp,q_80,s_1024x1024/headshot-cropped-1000x1000.jpg 1024w, /_ipx/f_webp,q_80,s_1280x1280/headshot-cropped-1000x1000.jpg 1280w, /_ipx/f_webp,q_80,s_1536x1536/headshot-cropped-1000x1000.jpg 1536w, /_ipx/f_webp,q_80,s_1536x1536/headshot-cropped-1000x1000.jpg 1536w" sizes="(max-width: 320px) 320px, (max-width: 640px) 640px, (max-width: 768px) 768px, (max-width: 1024px) 1024px, (max-width: 1280px) 1280px, (max-width: 1536px) 1536px, 1536px">
    <img width="250" height="250" loading="lazy" src="/_ipx/f_jpeg,q_80,s_1536x1536/headshot-cropped-1000x1000.jpg" srcset="/_ipx/f_jpeg,q_80,s_320x320/headshot-cropped-1000x1000.jpg 320w, /_ipx/f_jpeg,q_80,s_640x640/headshot-cropped-1000x1000.jpg 640w, /_ipx/f_jpeg,q_80,s_768x768/headshot-cropped-1000x1000.jpg 768w, /_ipx/f_jpeg,q_80,s_1024x1024/headshot-cropped-1000x1000.jpg 1024w, /_ipx/f_jpeg,q_80,s_1280x1280/headshot-cropped-1000x1000.jpg 1280w, /_ipx/f_jpeg,q_80,s_1536x1536/headshot-cropped-1000x1000.jpg 1536w, /_ipx/f_jpeg,q_80,s_1536x1536/headshot-cropped-1000x1000.jpg 1536w" sizes="(max-width: 320px) 320px, (max-width: 640px) 640px, (max-width: 768px) 768px, (max-width: 1024px) 1024px, (max-width: 1280px) 1280px, (max-width: 1536px) 1536px, 1536px">
</picture>

My browser still loads the fallback jpg so it doesn't completely break the image loading, but it certainly breaks loading other formats besides png/jpg (whichever fallback is used).

[realandrew]

Ah, I see if I actually go to download the file it is indeed webp (I think the problem was just sometimes it was falling back for some reason). What is buggy though is that the webp file is not being resized, it's still 1000x1000 even though I'm clearly asking for 250x250, which is making the file bigger in size than the jpg fallback.

[hartmut-co-uk]

@realandrew as per my understanding, you should set the dimensions (img width+height) to match the actual source image - which is used by the browser to calculate the layout - but it's not about telling nuxt-image what size you wish the image to be. -> Then use css to define how (dimensions/layout) the image should be rendered on your page.

So if your source image is 4000x3000 - that's what you should put into the nuxt-image / nuxt-picture width & height attribs.

In regards to your observed behaviour: Depending on your device (screen dimensions & pixel density) the browser chooses the best fit image as per srcset/sizes available. If you open your page above on a desktop machine with fullscreen browser it most likely will choose the max srcset variant /_ipx/f_webp,q_80,s_1536x1536/headshot-cropped-1000x1000.jpg 1536w. The img attribs width/height are only used as a hint for the browser to calc the space required on the page to render+display the image. So for this max variant IPX will generate an image in WEBP, quality 80, and up to 1536x1536 in size - 'up to' meaning it won't make the image bigger than the original (1000x1000).

So to me the behaviour makes sense and is correct / as expected. I hope my explanation makes sense and is also correct. 🤓