Next.js Discord

Discord Forum

Can someone help me understand the sizes prop for Images?

Unanswered
Crème D’Argent posted this in #help-forum
Open in Discord
Crème D’ArgentOP
Hi, I am using cloudinary to host some of my images, and when I show those images in my NextJS app, I want to size them accordingly using cloudinary. I am using the CldImage component from the next-cloudinary package and I am passing in the sizes prop as such: 

 <CldImage
        sizes="(min-width: 480px ) 50vw,
      (min-width: 728px) 33vw,
      (min-width: 976px) 25vw,
      100vw"
        {...props}
    />


And when I open up my website, and I inspect the image, I can see the generated srcset:

srcset="https://res.cloudinary.com/imovinko/image/upload/f_auto/q_50/v1696421875/bhwgxdlpktacergvee55?_a=BAVAicGd0 256w,
https://res.cloudinary.com/imovinko/image/upload/f_auto/q_50/v1696421875/bhwgxdlpktacergvee55?_a=BAVAicGd0 384w,
https://res.cloudinary.com/imovinko/image/upload/f_auto/q_50/v1696421875/bhwgxdlpktacergvee55?_a=BAVAicGd0 640w,
https://res.cloudinary.com/imovinko/image/upload/f_auto/q_50/v1696421875/bhwgxdlpktacergvee55?_a=BAVAicGd0 750w,
https://res.cloudinary.com/imovinko/image/upload/f_auto/q_50/v1696421875/bhwgxdlpktacergvee55?_a=BAVAicGd0 828w,
https://res.cloudinary.com/imovinko/image/upload/f_auto/q_50/v1696421875/bhwgxdlpktacergvee55?_a=BAVAicGd0 1080w,
https://res.cloudinary.com/imovinko/image/upload/f_auto/q_50/v1696421875/bhwgxdlpktacergvee55?_a=BAVAicGd0 1200w,
https://res.cloudinary.com/imovinko/image/upload/f_auto/q_50/v1696421875/bhwgxdlpktacergvee55?_a=BAVAicGd0 1920w,
https://res.cloudinary.com/imovinko/image/upload/f_auto/q_50/v1696421875/bhwgxdlpktacergvee55?_a=BAVAicGd0 2048w,
https://res.cloudinary.com/imovinko/image/upload/f_auto/q_50/v1696421875/bhwgxdlpktacergvee55?_a=BAVAicGd0 3840w'


Now I don't know if I understood the sizes prop incorrectly, but shouldn't it be generating different links for each size? Because all of the links are completely the same? And when I right click and "Open image in new tab" it just shows me the full resolution image now matter what my screen size is. What I doing wrong here?

4 Replies

Miniature American Shepherd
@Crème D’Argent have you found why it's not injecting the good srcset configuration from the provided sizes ? having the same problem.

<Image
        src={product.image?.url} alt={`Product image ${product.title}`}
        width="400"
        height="600"
        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 400px"
        priority={true}
        className="mt-8 sm:mt-0"
      />


generated all breakpoints but should only use for 100vw and 400px

<img alt="Product image Tank must watch" fetchpriority="high" width="400" height="600" decoding="async" data-nimg="1" style="" sizes="(max-width: 768px) 100vw, (max-width: 1200px) 400px" srcset="test.jpg?width=640 640w, test.jpg?width=750 750w, test.jpg?width=828 828w, test.jpg?width=1080 1080w, test.jpg?width=1200 1200w, test.jpg?width=1920 1920w, test.jpg?width=2048 2048w, test.jpg?width=3840 3840w" src="test.jpg?width=3840" class="mt-8 sm:mt-0">
Miniature American Shepherd
Look's like it's a known issue : https://morganfeeney.com/posts/sizes-attribute-nextjs-image