Next.js Discord

Discord Forum

Not seeing srcset trimmed when altering sizes property on Next Image

Unanswered
Gray-tailed Tattler posted this in #help-forum
Open in Discord
Gray-tailed TattlerOP
My question concerns this paragraph from the docs
https://nextjs.org/docs/pages/api-reference/components/image#sizes:~:text=If%20the%20sizes%20property%20includes%20sizes%20such%20as%2050vw%2C%20which%20represent%20a%20percentage%20of%20the%20viewport%20width%2C%20then%20the%20srcset%20is%20trimmed%20to%20not%20include%20any%20values%20which%20are%20too%20small%20to%20ever%20be%20necessary.

This
     <Image 
                  src={product.store.previewImageUrl} 
                  alt={product.store.title} 
                  fill={true}
                  sizes="(max-width: 640px) 3vw, 2vw"
                  className="object-cover inset-0 h-full w-full"
                />

seems to generate the same <img srcset=""> as
     <Image 
                  src={product.store.previewImageUrl} 
                  alt={product.store.title} 
                  fill={true}
                  sizes="(max-width: 640px) 10vw, 20vw"
                  className="object-cover inset-0 h-full w-full"
                />


If i'm missing something, please advise what values I can use to see this trimmed version of the srcset in action.

2 Replies

Gray-tailed TattlerOP
Bumpy bump
Gray-tailed TattlerOP
Is this thing on?