Image component `sizes` property does not work

[josepholiveira]

Bug report

Describe the bug

When using the Image component, the sizes property doesn't work as described in the docs.

When using the Image component, the image is resized to match the container width which is size of the width attributes that we passed, or fit 100% of the viewport if the image is larger than the screen, ignoring the sizes attribute completely.

Example of code:

<Image
      width="800px"
      height="456.8px"
      sizes="(max-width: 500px) 100px"
      src="/next.png"
      alt="Next.js"
    />

To Reproduce

I created a codesandbox example with the exact problem:

1. Go to https://codesandbox.io/s/elated-neumann-u81mr?file=/pages/index.js
2. Resize the browser window width to be bigger than 500px to see that the image is the size of width 800px and height 456.8px
3. Resize the browser window width to be smaller than 500px to see that the image will fit to 100% of the screen, not respecting the sizes prop that should tell the image to be 100px

Expected behavior

I expect the image to have exactly a 100px when the view port is smaller then 500px, respecting the sizes attribute.

Screenshots

Bigger viewport width

Smaller viewport width

System information

• OS: Ubuntu 20.04
• Browser: Chrome
• Version of Next.js: 10.0.0
• Version of Node.js: v12.18.3

[SelvinM]

I think it's only supposed to work if you use the srcset attribute. Not sure though.

[josepholiveira]

I think it's only supposed to work if you use the srcset attribute. Not sure though.

I thought of that too! But giving the fact that the Image component generates the srcset for you, and that the docs doesn't provide any info on that attribute I preferred to open this issue, since it would make more sense to the Image component handle that too in that case.

[ardaerzin]

I am experiencing the same.

@SelvinM but the next/image already creates srcset

[mrmcc3]

sizes - Defines what proportion of the screen you expect the image to take up. Recommended, as it helps serve the correct sized image to each device.

It's the intended size of the image so the browser can pick the best image from srcSet. From what I can tell it won't actually style the image to be that size you've got to do that manually

[Mistwell]

Also have triuble with size usage and auto srcset generated.
have image with 2806px width but component cut size to 1200px

<Image src="/images/mainpage/shadow.png" alt={''} width={2806} height={2808} quality={100} sizes={???} />

[josepholiveira]

sizes - Defines what proportion of the screen you expect the image to take up. Recommended, as it helps serve the correct sized image to each device.

It's the intended size of the image so the browser can pick the best image from srcSet. From what I can tell it won't actually style the image to be that size you've got to do that manually

Makes a lot of sense, but still a little bit weird because the Image component creates a wrapper div with some element styles, and also styles the img with some element styles that makes it hard to style the image without using !important all over the place. But with the use of the sizes and the srcset attribute it indeed should make the image the size informed, you can see a little bit of that on https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images.

[mrmcc3]

@josepholiveira Yep you're right with an unstyled raw image tag the sizes attr does control the width. I agree the wrapper divs + default styles do put you in a situation where you can't just drop in the new Image component without adding some extra styles.

@Mistwell The Image component generates a srcset based off the default device sizes. You can override the defaults if you want to allow the browser to choose images wider then 1200. (unrelated to sizes)

[LauraBeatris]

I had the same issue but for now, as a workaround, I'm using the layout fill property with a container and media queries

<div className="md:h-20 md:w-20 w-10 h-10 relative">
  <Image
    quality={100}
    title="Floripa+"
    src="/images/logo.png"
    alt="Floripa Mais Logo"
    loading="eager"
    layout="fill"
   />
 </div>

In that way, the image won't shift the content and always respect the size of the container. Therefore, I would prefer to use the sizes property

[LauraBeatris]

As @mrmcc3 said

Next applies a list of device width breakpoints by default which is used to handle the cases where the images are wider than the viewport.

module.exports = {
  images: {
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
  },
}

For instance:

• Viewport: 1200px
• Image: 1920px

The final length of this image will be smaller than 1200px in order to fit the viewport

Refer to the intrinsic image layout, which is the default one:

If intrinsic, the image will scale the dimensions down for smaller viewports but maintain the original dimensions for larger viewports.

But if you want it to be fixed, regardless of device sizes or image sizes, the fixed property is the way to go:

If fixed, the image dimensions will not change as the viewport changes (no responsiveness).