Theo's Typesafe Cult•16mo ago

Sizes prop in the <Image/> component

I've always been using the <Image> component with the fill prop, but I've never used the sizes one: https://nextjs.org/docs/pages/api-reference/components/image#sizes I'm reading the docs and I don't understand what it does. I thought NextJS Images were automatically served with the proper size according to the device of the user, was I wrong? Is the sizes prop the thing that takes care of that? As an example, I have a hero image that always takes up the whole screen width, I've added the sizes prop like this:

<Image
      src="/example.png"
      fill
      sizes="100vw"
    />

<Image
      src="/example.png"
      fill
      sizes="100vw"
    />

and I don't see any difference when it comes to the srcset of images when I inspect the element - or any difference in lighthouse (with or without the sizes prop, the amount of KB spent on images is the same) so I'm not sure what it's actually doing

Components:

Optimize Images in your Next.js Application using the built-in next/image Component.

3 Replies

Neto•16mo ago

next image caches on image size as well

Neto•16mo ago

https://nextjs.org/docs/app/building-your-application/optimizing/images#image-sizing

Optimizing: Images

Optimize your images with the built-in next/image component.

Muhct•16mo ago

not sure what you mean, I'm only talking about the sizes prop - it doesnt have any effect in my website images with or without cache disabled, so I'm not sure what is its purpose

Gaming

Programming

Sizes prop in the <Image/> component