search

cloudinary-community / next-cloudinary

⚡️ High-performance image delivery and uploading at scale in Next.js powered by Cloudinary.
https://next.cloudinary.dev
MIT License
252 stars 74 forks source link

[Bug] `sizes` not working with Next 12 #266

Closed harry-gocity closed 9 months ago

harry-gocity commented 1 year ago

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

  1. Check out this repo - https://github.com/harry-gocity/next-cloudinary-sizes
  2. Create a .env in the root with NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=XXXX
  3. Replace the src const in index.tsx with a source of your own
  4. npm i
  5. npm run start
  6. In dev tools, the URL requested at any device width will be 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

colbyfayock commented 1 year 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

pcastr0 commented 1 year ago

Hello @colbyfayock any update on this? 😅

colbyfayock commented 1 year ago

@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

lhguerra commented 1 year ago

I'm still getting this behavior in 4.22.1 with Next 13.5.4

colbyfayock commented 1 year ago

@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

lhguerra commented 1 year ago

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: image

With Next Image the srcset is correctly generated according to the sizes prop: image

colbyfayock commented 1 year ago

@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?

lhguerra commented 1 year ago

done https://github.com/colbyfayock/next-cloudinary/issues/295

colbyfayock commented 1 year ago

thanks

harry-gocity commented 9 months ago

Hi @colbyfayock, just wanted to check in on this. Is this something that can be fixed without breaking the lib for next 13/14?

colbyfayock commented 9 months ago

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?

Layout Fill, Sizes 10px

<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
  ">

Width+Height, Sizes 10px

<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
  ">

Layout Fill, Sizes 100w

<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
">

Width+Height, Sizes 100vw

<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
">

Width+Height, (max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw

<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
  ">
harry-gocity commented 9 months ago

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?

colbyfayock commented 9 months ago

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>
harry-gocity commented 9 months ago

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