nuxt
srcset containing higher unwanted resolutions (and browser requesting it)
consider this use of NuxtPicture:
<NuxtPicture
:width="1199"
:height="1200"
provider="storyblok"
src="https://a.storyblok.com/f/243571/1199x1200/d94f7ca4c0/female-birthmarks.png"
sizes="xs:360px sm:640px md:768px lg:1024px xl:1199px"
/>
since the original image is not larger than 1199x1200, i don't want it to be unnecessarily upscaled on large resolutions. in my opinion the last size xl:1199px should accomplish that.
however, this is the HTML generated by NuxtPicture:
<picture>
<source
type="image/webp"
sizes="(max-width: 640px) 360px, (max-width: 768px) 640px, (max-width: 1024px) 768px, (max-width: 1280px) 1024px, 1199px"
srcset="https://a.storyblok.com/f/243571/1199x1200/d94f7ca4c0/female-birthmarks.png/m/360x360/filters:format(webp) 360w,
https://a.storyblok.com/f/243571/1199x1200/d94f7ca4c0/female-birthmarks.png/m/640x641/filters:format(webp) 640w,
https://a.storyblok.com/f/243571/1199x1200/d94f7ca4c0/female-birthmarks.png/m/720x720/filters:format(webp) 720w,
https://a.storyblok.com/f/243571/1199x1200/d94f7ca4c0/female-birthmarks.png/m/768x769/filters:format(webp) 768w,
https://a.storyblok.com/f/243571/1199x1200/d94f7ca4c0/female-birthmarks.png/m/1024x1025/filters:format(webp) 1024w,
https://a.storyblok.com/f/243571/1199x1200/d94f7ca4c0/female-birthmarks.png/m/1199x1200/filters:format(webp) 1199w,
https://a.storyblok.com/f/243571/1199x1200/d94f7ca4c0/female-birthmarks.png/m/1280x1282/filters:format(webp) 1280w,
https://a.storyblok.com/f/243571/1199x1200/d94f7ca4c0/female-birthmarks.png/m/1536x1538/filters:format(webp) 1536w,
https://a.storyblok.com/f/243571/1199x1200/d94f7ca4c0/female-birthmarks.png/m/2048x2050/filters:format(webp) 2048w,
https://a.storyblok.com/f/243571/1199x1200/d94f7ca4c0/female-birthmarks.png/m/2398x2400/filters:format(webp) 2398w"
>
<img width="1199" height="1200" onerror="this.setAttribute('data-error', 1)" data-nuxt-pic=""
src="https://a.storyblok.com/f/243571/1199x1200/d94f7ca4c0/female-birthmarks.png/m/2398x2400/filters:format(png)"
sizes="(max-width: 640px) 360px, (max-width: 768px) 640px, (max-width: 1024px) 768px, (max-width: 1280px) 1024px, 1199px"
srcset="https://a.storyblok.com/f/243571/1199x1200/d94f7ca4c0/female-birthmarks.png/m/360x360/filters:format(png) 360w,
https://a.storyblok.com/f/243571/1199x1200/d94f7ca4c0/female-birthmarks.png/m/640x641/filters:format(png) 640w,
https://a.storyblok.com/f/243571/1199x1200/d94f7ca4c0/female-birthmarks.png/m/720x720/filters:format(png) 720w,
https://a.storyblok.com/f/243571/1199x1200/d94f7ca4c0/female-birthmarks.png/m/768x769/filters:format(png) 768w,
https://a.storyblok.com/f/243571/1199x1200/d94f7ca4c0/female-birthmarks.png/m/1024x1025/filters:format(png) 1024w,
https://a.storyblok.com/f/243571/1199x1200/d94f7ca4c0/female-birthmarks.png/m/1199x1200/filters:format(png) 1199w,
https://a.storyblok.com/f/243571/1199x1200/d94f7ca4c0/female-birthmarks.png/m/1280x1282/filters:format(png) 1280w,
https://a.storyblok.com/f/243571/1199x1200/d94f7ca4c0/female-birthmarks.png/m/1536x1538/filters:format(png) 1536w,
https://a.storyblok.com/f/243571/1199x1200/d94f7ca4c0/female-birthmarks.png/m/2048x2050/filters:format(png) 2048w,
https://a.storyblok.com/f/243571/1199x1200/d94f7ca4c0/female-birthmarks.png/m/2398x2400/filters:format(png) 2398w"
>
</picture>
using this code, e.g. on 2398w+ resolutions the image is requested by the browser (chrome@windows) in a version upscaled to 2398x2400.
imho these lines should not be output in the srcset:
https://a.storyblok.com/f/243571/1199x1200/d94f7ca4c0/female-birthmarks.png/m/1280x1282/filters:format(png) 1280w,
https://a.storyblok.com/f/243571/1199x1200/d94f7ca4c0/female-birthmarks.png/m/1536x1538/filters:format(png) 1536w,
https://a.storyblok.com/f/243571/1199x1200/d94f7ca4c0/female-birthmarks.png/m/2048x2050/filters:format(png) 2048w,
https://a.storyblok.com/f/243571/1199x1200/d94f7ca4c0/female-birthmarks.png/m/2398x2400/filters:format(png) 2398w
... or should all contain the URL with the maximum wanted resolution:
https://a.storyblok.com/f/243571/1199x1200/d94f7ca4c0/female-birthmarks.png/m/1199x1200/filters:format(png)
the problem can be solved by specifying the additional sizes in the sizes attribute:
<NuxtPicture
:width="1199"
:height="1200"
provider="storyblok"
src="https://a.storyblok.com/f/243571/1199x1200/d94f7ca4c0/female-birthmarks.png"
sizes="xs:360px sm:640px md:768px lg:1024px xl:1199px 2xl:1199px 3xl:1199px 4xl:1199px"
/>
but still i think xl:1199px should mean "xl and above" already, which is also stated in the docs (https://image.nuxt.com/usage/nuxt-img#sizes).
btw, there is also an error in the docs i think: on https://image.nuxt.com/get-started/configuration#screens these default sizes are stated:
{
'xs': 320,
'sm': 640,
'md': 768,
'lg': 1024,
'xl': 1280,
'xxl': 1536,
'2xl': 1536
},
apart from the erroniously duplicate xxl and 2xl values, the higher res values seem to be missing. so i think this should be the actual values:
{
'xs': 360,
'sm': 640,
'md': 768,
'lg': 1024,
'xl': 1280,
'2xl': 1536,
'3xl': 2048,
'4xl': 2398,
}
I thought this was broken at first as well, until you realise the srcset variants are generated based off the densities that are defined, which if not on the component, they are pulled from the module options, which happens to default to densities: [1, 2].
So if you define the default to just 1x or define densities="1x" on the NuxtImage component you'll probably find it doesn't add srcset variants for 2x every size you define.
I don't know if this will help anyone else, but thought I would put it here in case it does.
@tompato yes, i think you are right. many thanks for the clarification!