nuxt
Using NuxtPicture with ipx and 'nuxt generate' generates images of all size regardless of dimensions set with width/height attributes
I am running into a problem using NuxtPicture over NuxtImg.
NuxtImg - static generation of images works
When using NuxtImg and generating the images statically using nuxt generate works well:
<NuxtImg src="ladder-light.jpg" width="300" />
produces the following output
# ...
ℹ Prerendering 3 initial routes with crawler nitro 21:03:23
├─ /200.html (56ms) nitro 21:03:23
├─ /404.html (57ms) nitro 21:03:23
├─ / (60ms) nitro 21:03:23
├─ /_payload.json (5ms) nitro 21:03:23
├─ /_ipx/w_300/ladder-light.jpg (121ms) nitro 21:03:24
├─ /_ipx/w_600/ladder-light.jpg (174ms) nitro 21:06:16
✔ Generated public .output/public
NuxtPicture - static generation of images is flawed
In contrast to this, using NuxtPicture and generating the images statically does not respect the desired width for the image and instead generates all possible size/format/fit combinations:
<NuxtPicture src="/ladder-light.jpg" width="300" />
produces the following output
# ...
ℹ Prerendering 3 initial routes with crawler nitro 21:06:13
├─ / (65ms) nitro 21:06:13
├─ /200.html (61ms) nitro 21:06:13
├─ /404.html (62ms) nitro 21:06:13
├─ /_payload.json (10ms) nitro 21:06:13
├─ /_ipx/w_320&f_webp/ladder-light.jpg (227ms) nitro 21:06:16
├─ /_ipx/w_640&f_webp/ladder-light.jpg (365ms) nitro 21:06:16
├─ /_ipx/w_1024&f_webp/ladder-light.jpg (696ms) nitro 21:06:16
├─ /_ipx/w_768&f_webp/ladder-light.jpg (1155ms) nitro 21:06:16
├─ /_ipx/w_320&f_jpeg/ladder-light.jpg (1509ms) nitro 21:06:16
├─ /_ipx/w_640&f_jpeg/ladder-light.jpg (1651ms) nitro 21:06:16
├─ /_ipx/w_768&f_jpeg/ladder-light.jpg (1969ms) nitro 21:06:16
├─ /_ipx/w_1280&f_webp/ladder-light.jpg (791ms) nitro 21:06:16
├─ /_ipx/w_1280&f_jpeg/ladder-light.jpg (1518ms) nitro 21:06:16
├─ /_ipx/w_1536&f_webp/ladder-light.jpg (1583ms) nitro 21:06:16
├─ /_ipx/w_1536&f_jpeg/ladder-light.jpg (1903ms) nitro 21:06:16
├─ /_ipx/w_3072&f_webp/ladder-light.jpg (1330ms) nitro 21:06:16
├─ /_ipx/w_2560&f_webp/ladder-light.jpg (1426ms) nitro 21:06:16
├─ /_ipx/w_2048&f_jpeg/ladder-light.jpg (2027ms) nitro 21:06:16
├─ /_ipx/w_3072&f_jpeg/ladder-light.jpg (2218ms) nitro 21:06:16
├─ /_ipx/w_2560&f_jpeg/ladder-light.jpg (2346ms) nitro 21:06:16
├─ /_ipx/w_1024&f_jpeg/ladder-light.jpg (2354ms) nitro 21:06:16
├─ /_ipx/w_2048&f_webp/ladder-light.jpg (2433ms) nitro 21:06:16
✔ Generated public .output/public
NuxtImg generates 2 images vs NuxtPicture's 18.
As the sizes outside the desired dimensions set on NuxtImg/NuxtPicture are irrelevant 16 irrelevant images were generated in this example.
This quickly gets out of hand with multiple images and inflates the size of the output.
Reproduction steps
To reproduce checkout https://github.com/BWagener/NuxtImage-bug-reproduction, edit the app.vue file, toggle the comment on either NuxtImg or NuxtPicture and run nuxt generate.
I'm running into the same issue. I have a bunch of images 128x128 pixels in size, I just want to generate WEBP and AVIF versions of them, but NuxtPicture generates a whole entire slew of them at all sorts of different sizes... each generated image still being 128x128 regardless.
Because of that, the build process now takes so long it outright crashes sometimes.
Edit: The current workaround I found was explicitly setting the sizes of the picture:
<NuxtPicture
format="avif,webp"
sizes="128px"
densities="x1"
width="128"
height="128"
:src="img"
/>
I also added explicit x1 density because otherwise it would still generate the same 128x128 image for the x2 density anyway
I'm having this issue too, using NuxtImg works as expected, but switching to NuxtPicture ignores my width and height and generates several different variants way larger than 100x100 pixels (the image file isn't even that big).
<NuxtImg
src="/icon.png"
width="100"
height="100"
/>
<NuxtPicture
src="/icon.png"
width="100"
height="100"
/>
