nuxt
nuxt-picture and the provider Cloudflare seem to not render x2 density
Hello!
I integrated nuxt-picture into my project together with Cloudflare as a provider. Responsive images get rendered via picture tag. So far so good… but I am having issues with densities. According to the documentation default densities are [1, 2] which is perfectly fine. Unfortunately it seems that I do not get retina images in the frontend. I am using @nuxt/image": "^1.0.0-rc.1" with "nuxt": "^3.6.1"
When I test on 1x monitor I get 1x image. But when I test on retina display I do not get the retina image rendered. I expect x2 resolution as a result.
For a simulated screen resolution of 767px in chrome devtools the image is always 767px wide no matter which monitor (retina or not) I test on. What I expect for retina is 767px * 2 = 1534px wide image automatically generated by Cloudflare.
<picture data-v-c53b7df3="">
<source type="image/webp" sizes="(max-width: 320px) 320px, (max-width: 767px) 767px, 320px"
srcset="https://xy.com/cdn-cgi/image/w=320,f=webp/https://media.xy.com/wp-content/uploads/2019/11/image.png 320w, https://xy.com/cdn-cgi/image/w=767,f=webp/https://media.xy.com/wp-content/uploads/2019/11/image.png 767w, https://xy.com/cdn-cgi/image/w=320,f=webp/https://media.xy.com/wp-content/uploads/2019/11/image.png 320w">
<img alt="xy Enables Greater Standardization for Radiotherapy Departments" loading="lazy" class="media-image"
data-nuxt-pic=""
src="https://xy.com/cdn-cgi/image/w=320,f=png/https://media.xy.com/wp-content/uploads/2019/11/image.png"
sizes="(max-width: 320px) 320px, (max-width: 767px) 767px, 320px"
srcset="https://xy.com/cdn-cgi/image/w=320,f=png/https://media.xy.com/wp-content/uploads/2019/11/image.png 320w, https://xy.com/cdn-cgi/image/w=767,f=png/https://media.xy.com/wp-content/uploads/2019/11/image.png 767w, https://xy.com/cdn-cgi/image/w=320,f=png/https://media.xy.com/wp-content/uploads/2019/11/image.png 320w">
</picture>
If I set Cloudflare dpr with value 2 as a modifier I get the resolution of the source image doubled. But that's not what I want as now retina images get rendered on all monitors.
<nuxt-picture
:src="source"
:sizes="sizes"
:modifiers="{
dpr: '2'
}"
/>
ℹ️ The paid add-on Cloudflare Image Resizing is active for the project that I'm working on https://developers.cloudflare.com/images/image-resizing/
I believe density support is not in rc1. It should be present in edge channel and will be released in rc2.
Hi, any progress on this? It still seems to be broken when using a provider.
Once I switch from NuxtImg to NuxtPicture (no other changes), it does not generate srcset with 1x and 2x anymore but immediately sets sizes too.
the problem seems to be, that NuxtPicture does not support densities at the moment, but only NuxtImg. it has nothing to do with the provider. (maybe a change of the issue-title to something like densities not working with NuxtPicture would be good.)
by default nuxt/image has densities set to x1 x2 and a list of default sizes (320px, 640px, 768px, 1024px, 1280px, 1536px).
currently this default tag:
<NuxtPicture src="/logos/nuxt.png" />
...generates this HTML:
<picture>
<source
type="image/webp"
sizes="
(max-width: 640px) 320px,
(max-width: 768px) 640px,
(max-width: 1024px) 768px,
(max-width: 1280px) 1024px,
(max-width: 1536px) 1280px,
1536px
"
srcset="
/_ipx/w_320&f_webp/logos/nuxt.png 320w,
/_ipx/w_640&f_webp/logos/nuxt.png 640w,
/_ipx/w_768&f_webp/logos/nuxt.png 768w,
/_ipx/w_1024&f_webp/logos/nuxt.png 1024w,
/_ipx/w_1280&f_webp/logos/nuxt.png 1280w,
/_ipx/w_1536&f_webp/logos/nuxt.png 1536w,
/_ipx/w_2048&f_webp/logos/nuxt.png 2048w,
/_ipx/w_2560&f_webp/logos/nuxt.png 2560w,
/_ipx/w_3072&f_webp/logos/nuxt.png 3072w
"
/>
<img
src="/_ipx/w_3072&f_png/logos/nuxt.png"
sizes="
(max-width: 640px) 320px,
(max-width: 768px) 640px,
(max-width: 1024px) 768px,
(max-width: 1280px) 1024px,
(max-width: 1536px) 1280px,
1536px
"
srcset="
/_ipx/w_320&f_png/logos/nuxt.png 320w,
/_ipx/w_640&f_png/logos/nuxt.png 640w,
/_ipx/w_768&f_png/logos/nuxt.png 768w,
/_ipx/w_1024&f_png/logos/nuxt.png 1024w,
/_ipx/w_1280&f_png/logos/nuxt.png 1280w,
/_ipx/w_1536&f_png/logos/nuxt.png 1536w,
/_ipx/w_2048&f_png/logos/nuxt.png 2048w,
/_ipx/w_2560&f_png/logos/nuxt.png 2560w,
/_ipx/w_3072&f_png/logos/nuxt.png 3072w
"
/>
</picture>
it has not density information.
according to this stackoverflow answer the way to combine densities with max-widths would be to use a source tag for every width. so imho the HTML should look something like this:
<picture>
<source
type="image/webp"
media="(max-width: 640px)"
srcset="
/_ipx/w_320&f_webp/logos/nuxt.png 1x,
/_ipx/w_640&f_webp/logos/nuxt.png 2x
"
/>
<source
type="image/webp"
media="(max-width: 768px)"
srcset="
/_ipx/w_640&f_webp/logos/nuxt.png 1x,
/_ipx/w_1280&f_webp/logos/nuxt.png 2x
"
/>
<source
type="image/webp"
media="(max-width: 1024px)"
srcset="
/_ipx/w_768&f_webp/logos/nuxt.png 1x,
/_ipx/w_1536&f_webp/logos/nuxt.png 2x
"
/>
<source
type="image/webp"
media="(max-width: 1280px)"
srcset="
/_ipx/w_1024&f_webp/logos/nuxt.png 1x,
/_ipx/w_2048&f_webp/logos/nuxt.png 2x
"
/>
<source
type="image/webp"
media="(max-width: 1536px)"
srcset="
/_ipx/w_1280&f_webp/logos/nuxt.png 1x,
/_ipx/w_2560&f_webp/logos/nuxt.png 2x
"
/>
<source
type="image/webp"
srcset="
/_ipx/w_1536&f_webp/logos/nuxt.png 1x,
/_ipx/w_3072&f_webp/logos/nuxt.png 2x
"
/>
<source
type="image/png"
media="(max-width: 640px)"
srcset="
/_ipx/w_320&f_png/logos/nuxt.png 1x,
/_ipx/w_640&f_png/logos/nuxt.png 2x
"
/>
<source
type="image/png"
media="(max-width: 768px)"
srcset="
/_ipx/w_640&f_png/logos/nuxt.png 1x,
/_ipx/w_1280&f_png/logos/nuxt.png 2x
"
/>
<source
type="image/png"
media="(max-width: 1024px)"
srcset="
/_ipx/w_768&f_png/logos/nuxt.png 1x,
/_ipx/w_1536&f_png/logos/nuxt.png 2x
"
/>
<source
type="image/png"
media="(max-width: 1280px)"
srcset="
/_ipx/w_1024&f_png/logos/nuxt.png 1x,
/_ipx/w_2048&f_png/logos/nuxt.png 2x
"
/>
<source
type="image/png"
media="(max-width: 1536px)"
srcset="
/_ipx/w_1280&f_png/logos/nuxt.png 1x,
/_ipx/w_2560&f_png/logos/nuxt.png 2x
"
/>
<source
type="image/png"
srcset="
/_ipx/w_1536&f_png/logos/nuxt.png 1x,
/_ipx/w_3072&f_png/logos/nuxt.png 2x
"
/>
<img src="/_ipx/w_3072&f_png/logos/nuxt.png" />
</picture>
