Closed harry-gocity closed 9 months ago
hey thanks for the report. i was able to reproduce this locally. ill see what i can do about getting to this and getting a fix in
Hello @colbyfayock any update on this? 😅
@pcastr0 unfortunately not yet - ive been buried under other work
if either of you are interested, we're currently offering eligble PRs free swag for Hacktoberfest in case you want to give fixing it a shot!!
https://cloudinary.com/blog/hacktoberfest-celebrate-open-source-sdks
one challenge is being able to have the ability to test in both environments locally. the Docs use the Pages router, but are upgraded to Next.js 13. there's a test app in the tests
directorythat uses Next.js 13 app router. could theoretically add another one for Next.js 12 to test, even if temporary
i should be dug out after this week so hopefully it free more time to get to Issues like this if someone doesn't look at it first
I'm still getting this behavior in 4.22.1 with Next 13.5.4
@lhguerra are you able to create a codesandbox that reproduces that?
I just looked at the docs and it seems to be functioning, particularly looked at the homepage images and examples page for CldImage
one thing i'd like to clarify that may help explain some behavior, whether here, or for others, is that in the instances that the responsive width would be larger than the actual defined size, we're currently not adding a transformation to change the size to avoid potential upscaling effects
looking at a quick example of the first image on the homepage of: https://next.cloudinary.dev/
The code used is:
<CldImage
width="987"
height="1481"
src={`${process.env.IMAGES_DIRECTORY}/woman-headphones`}
sizes="50vw"
alt="Original image of woman with headphones"
/>
Here I'm defining the width as 987 and the produced results on the rendered page are:
<img
alt="Original image of woman with headphones"
loading="lazy"
width="987"
height="1481"
decoding="async"
data-nimg="1"
sizes="50vw"
srcset="
https://res.cloudinary.com/colbycloud-next-cloudinary/image/upload/c_limit,w_987/c_scale,w_384/f_auto/q_auto/v1/images/woman-headphones?_a=BAVAkAGd0 384w,
https://res.cloudinary.com/colbycloud-next-cloudinary/image/upload/c_limit,w_987/c_scale,w_640/f_auto/q_auto/v1/images/woman-headphones?_a=BAVAkAGd0 640w,
https://res.cloudinary.com/colbycloud-next-cloudinary/image/upload/c_limit,w_987/c_scale,w_750/f_auto/q_auto/v1/images/woman-headphones?_a=BAVAkAGd0 750w,
https://res.cloudinary.com/colbycloud-next-cloudinary/image/upload/c_limit,w_987/c_scale,w_828/f_auto/q_auto/v1/images/woman-headphones?_a=BAVAkAGd0 828w,
https://res.cloudinary.com/colbycloud-next-cloudinary/image/upload/c_limit,w_987/f_auto/q_auto/v1/images/woman-headphones?_a=BAVAkAGd0 1080w,
https://res.cloudinary.com/colbycloud-next-cloudinary/image/upload/c_limit,w_987/f_auto/q_auto/v1/images/woman-headphones?_a=BAVAkAGd0 1200w,
https://res.cloudinary.com/colbycloud-next-cloudinary/image/upload/c_limit,w_987/f_auto/q_auto/v1/images/woman-headphones?_a=BAVAkAGd0 1920w,
https://res.cloudinary.com/colbycloud-next-cloudinary/image/upload/c_limit,w_987/f_auto/q_auto/v1/images/woman-headphones?_a=BAVAkAGd0 2048w,
https://res.cloudinary.com/colbycloud-next-cloudinary/image/upload/c_limit,w_987/f_auto/q_auto/v1/images/woman-headphones?_a=BAVAkAGd0 3840w
"
src="https://res.cloudinary.com/colbycloud-next-cloudinary/image/upload/c_limit,w_987/f_auto/q_auto/v1/images/woman-headphones?_a=BAVAkAGd0"
style="color: transparent;"
>
breaking this down to look at the transformations being applied:
.../c_limit,w_987/c_scale,w_384/... 384w,
.../c_limit,w_987/c_scale,w_640/... 640w,
.../c_limit,w_987/c_scale,w_750/... 750w,
.../c_limit,w_987/c_scale,w_828/... 828w,
.../c_limit,w_987/... 1080w,
.../c_limit,w_987/... 1200w,
.../c_limit,w_987/... 1920w,
.../c_limit,w_987/... 2048w,
.../c_limit,w_987/... 3840w
we can see that we're scaling down, but we're not scaling up, as at that point, we're letting the browser handle the resizing, rather than trying to deliver a larger image in size, which would produce a bigger file size, which feels like an "unoptimization"
im curious if maybe thats what you're hitting in Next.js 13? if not i'd be happy to debug
I'm currently not able to put together a sandbox, but one detail that is different is that I'm not setting sizes, but using the fill property instead.
With CldImage all the links are the same:
With Next Image the srcset is correctly generated according to the sizes prop:
@lhguerra i was able to reproduce that - i suspect this is a different issue, but certainly could be related, but can you create a new Issue for this?
thanks
Hi @colbyfayock, just wanted to check in on this. Is this something that can be fixed without breaking the lib for next 13/14?
hey @harry-gocity taking another look at this with your example, i mentioned i reproduced it before, but i think i misunderstood what was actually happening, and im led to believe it's working as expected
this is somewhat of my understanding of how sizes="10px" works in practice, as i understand it to be that you're setting the size available to 10px, meaning, out of the srcset generated, it would always provide a closest match to 10px, which would be the 16px generated version in the srcset. this would be why you wouldn't be seeing different images load at different sizes
i played around with the settings a bit with different properties and it seems like it is working as expected
im consulting with a colleague about my understanding of sizes="10px" but based on the fact that there's a srcset available with a lot of sizes and you only ever see the 16px one, it seems like it makes sense
if it's working properly but not as you expect it to, could you share with me your use case that you're trying to solve and maybe i can help you figure it out?
<img alt=""
src="https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_3840/c_limit,w_3840/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0"
...
sizes="10px"
srcset="
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_16/c_limit,w_16/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 16w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_32/c_limit,w_32/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 32w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_48/c_limit,w_48/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 48w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_64/c_limit,w_64/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 64w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_96/c_limit,w_96/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 96w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_128/c_limit,w_128/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 128w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_256/c_limit,w_256/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 256w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_384/c_limit,w_384/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 384w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_640/c_limit,w_640/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 640w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_750/c_limit,w_750/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 750w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_828/c_limit,w_828/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 828w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1080/c_limit,w_1080/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 1080w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1200/c_limit,w_1200/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 1200w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1920/c_limit,w_1920/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 1920w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_2048/c_limit,w_2048/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 2048w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_3840/c_limit,w_3840/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 3840w
">
<img alt=""
src="https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_3840/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0"
...
sizes="10px"
srcset="
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_16/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 16w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_32/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 32w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_48/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 48w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_64/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 64w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_96/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 96w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_128/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 128w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_256/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 256w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_384/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 384w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_640/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 640w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_750/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 750w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_828/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 828w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_1080/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 1080w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_1200/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 1200w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_1920/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 1920w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_2048/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 2048w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_3840/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 3840w
">
<img alt=""
src="https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_3840/c_limit,w_3840/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0"
sizes="100vw"
srcset="
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_640/c_limit,w_640/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 640w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_750/c_limit,w_750/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 750w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_828/c_limit,w_828/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 828w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1080/c_limit,w_1080/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 1080w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1200/c_limit,w_1200/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 1200w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1920/c_limit,w_1920/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 1920w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_2048/c_limit,w_2048/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 2048w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_3840/c_limit,w_3840/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 3840w
">
<img alt=""
src="https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_3840/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0"
decoding="async" data-nimg="responsive" style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"
sizes="100vw"
srcset="
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_640/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 640w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_750/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 750w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_828/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 828w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_1080/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 1080w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_1200/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 1200w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_1920/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 1920w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_2048/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 2048w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_3840/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 3840w
">
<img alt=""
src="https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_3840/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0"
...
srcset="
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_256/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 256w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_384/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 384w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_640/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 640w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_750/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 750w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_828/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 828w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_1080/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 1080w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_1200/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 1200w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_1920/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 1920w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_2048/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 2048w,
https://res.cloudinary.com/colbycloud-examples/image/upload/c_limit,w_1364/c_limit,w_3840/f_auto/q_auto/v1/examples/city_julte6?_a=DAVAr0E4ZAA0 3840w
">
Thanks for looking into this 🙌🏻 The 10px is kind of irrelevant, the use case is I just want srcsets to generate and the image fetched to differ based on viewport. Using the same repro as before (now with latest next-cloudinary
version) I still get the same issue. Rendering like this:
<div>
<CldImage
layout={"fill"}
src={src}
alt={''}
width={100}
height={300}
sizes="(max-width: 768px) 100vw,
(max-width: 1200px) 50vw,
33vw"
/>
</div>
Generates srcset
like this
<img
alt=""
src="https://res.cloudinary.com/dtljonz0f/image/upload/c_limit,w_100/f_auto/q_auto/v1/gc-v1/bangkok/Bangkok_Fireworks.jpeg?_a=DAVAdxE4ZAA0"
decoding="async"
data-nimg="fill"
style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%"
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
srcSet="
https://res.cloudinary.com/dtljonz0f/image/upload/c_limit,w_100/f_auto/q_auto/v1/gc-v1/bangkok/Bangkok_Fireworks.jpeg?_a=DAVAdxE4ZAA0 256w,
https://res.cloudinary.com/dtljonz0f/image/upload/c_limit,w_100/f_auto/q_auto/v1/gc-v1/bangkok/Bangkok_Fireworks.jpeg?_a=DAVAdxE4ZAA0 384w,
https://res.cloudinary.com/dtljonz0f/image/upload/c_limit,w_100/f_auto/q_auto/v1/gc-v1/bangkok/Bangkok_Fireworks.jpeg?_a=DAVAdxE4ZAA0 640w,
https://res.cloudinary.com/dtljonz0f/image/upload/c_limit,w_100/f_auto/q_auto/v1/gc-v1/bangkok/Bangkok_Fireworks.jpeg?_a=DAVAdxE4ZAA0 750w,
https://res.cloudinary.com/dtljonz0f/image/upload/c_limit,w_100/f_auto/q_auto/v1/gc-v1/bangkok/Bangkok_Fireworks.jpeg?_a=DAVAdxE4ZAA0 828w,
https://res.cloudinary.com/dtljonz0f/image/upload/c_limit,w_100/f_auto/q_auto/v1/gc-v1/bangkok/Bangkok_Fireworks.jpeg?_a=DAVAdxE4ZAA0 1080w,
https://res.cloudinary.com/dtljonz0f/image/upload/c_limit,w_100/f_auto/q_auto/v1/gc-v1/bangkok/Bangkok_Fireworks.jpeg?_a=DAVAdxE4ZAA0 1200w,
https://res.cloudinary.com/dtljonz0f/image/upload/c_limit,w_100/f_auto/q_auto/v1/gc-v1/bangkok/Bangkok_Fireworks.jpeg?_a=DAVAdxE4ZAA0 1920w,
https://res.cloudinary.com/dtljonz0f/image/upload/c_limit,w_100/f_auto/q_auto/v1/gc-v1/bangkok/Bangkok_Fireworks.jpeg?_a=DAVAdxE4ZAA0 2048w,
https://res.cloudinary.com/dtljonz0f/image/upload/c_limit,w_100/f_auto/q_auto/v1/gc-v1/bangkok/Bangkok_Fireworks.jpeg?_a=DAVAdxE4ZAA0 3840w
"
/>;
Regardless of the width
, height
and sizes
prop every url references
c_limit,w_100/f_auto/q_auto
Unlike the youtube video or your example above which include a width transform:
c_limit,w_1364/c_limit,w_3840/f_auto/q_auto/
I appreciate the examples you added above as it means I probably have something set up wrong. Is that pulled from one of the next-cloudinary
examples I can find somewhere?
so that example you gave i believe is working "as expected" but i'll be fixing this soon as it doesnt seem like it's a great representation of what people are trying to do
see the example i shared here: https://github.com/cloudinary-community/next-cloudinary/issues/266#issuecomment-1746032118
because you're setting a width of 100, all of the sizes are above that value:
https://res.cloudinary.com/dtljonz0f/image/upload/c_limit,w_100/f_auto... 256w,
https://res.cloudinary.com/dtljonz0f/image/upload/c_limit,w_100/f_auto... 384w,
https://res.cloudinary.com/dtljonz0f/image/upload/c_limit,w_100/f_auto... 640w,
https://res.cloudinary.com/dtljonz0f/image/upload/c_limit,w_100/f_auto... 750w,
https://res.cloudinary.com/dtljonz0f/image/upload/c_limit,w_100/f_auto... 828w,
https://res.cloudinary.com/dtljonz0f/image/upload/c_limit,w_100/f_auto... 1080w,
https://res.cloudinary.com/dtljonz0f/image/upload/c_limit,w_100/f_auto... 1200w,
https://res.cloudinary.com/dtljonz0f/image/upload/c_limit,w_100/f_auto... 1920w,
https://res.cloudinary.com/dtljonz0f/image/upload/c_limit,w_100/f_auto... 2048w,
https://res.cloudinary.com/dtljonz0f/image/upload/c_limit,w_100/f_auto... 3840w
so the original thinking when i wrote that was to avoid adding the additional transformation in the URL to save people transformation credit usage and potentially avoid upscaling, but im going to change that approach to be more straightforward and ideally more reliable
check out this thread for a little more context: https://github.com/cloudinary-community/next-cloudinary/issues/327
i'll still look more into this example, ensure i can reproduce exactly what you shared there, but i suspect if you set the width to a higher value, you'll start to see URLs with the sizing added, such as:
<div>
<CldImage
layout={"fill"}
src={src}
alt={''}
width={1000}
height={3000}
sizes="(max-width: 768px) 100vw,
(max-width: 1200px) 50vw,
33vw"
/>
</div>
Got you. The height / width was just too low and the urls are changing with larger values. Thanks for your time on this despite it being complete user error 😅 Will follow the other thread, and close this one now
Bug Report
Describe the bug
Using the sizes prop based on the docs has no effect on the fetched image with Next 12. Maybe I'm misreading the docs, but following with this video I can't reproduce the same effect. All the
srcset
links are the same cloudinary URL and the image fetched does not change based on the device size.Is this a regression?
I'm not sure
Steps To Reproduce the error
.env
in the root withNEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=XXXX
src
const inindex.tsx
with a source of your ownnpm i
npm run start
https://res.cloudinary.com/XXXX/image/upload/f_auto/q_auto/v1/YYYYY.jpeg?_a=BAVAdwE40
Expected behaviour
That the size of the requested image will change depending on the browser size.
Your environment
Additional context