0

On desktop, it detects the current viewport size correctly, but if I simulate mobile view on Chrome Dev Tools, the Image component detects the wrong device size.

I'd like to know how the Image component detects device sizes.

Zsolt Meszaros
  • 21,961
  • 19
  • 54
  • 57
Daniel Li
  • 170
  • 1
  • 12
  • 1
    if you using layout="responsive" you have to set correct sizes property for image https://nextjs.org/docs/api-reference/next/image#sizes – sglazkov Aug 16 '22 at 21:30

3 Answers3

3

The "Image" component doesn't detect device size. It generates an <img/> with preset srcset attribute. The browser reads this value and loads an image of appropriate size for the current viewport (see article).

You may see inconsistency in DevTools because of caching. If the browser downloaded a larger image and then you downsize viewport and update page, it still would retrieve the cached image for "wrong" viewport.

Hard reload won't be enough. Try to use "Clear cache and hard reload" after switching viewport size.

Nikolai Kiselev
  • 6,201
  • 2
  • 27
  • 37
0

You can specify a list of device width breakpoints using the deviceSizes property. These widths are used when the next/image component uses layout="responsive" or layout="fill" so that the correct image is served for the device visiting your website.

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

See also: https://nextjs.org/docs/basic-features/image-optimization

Johnny Kontrolletti
  • 727
  • 1
  • 10
  • 22
  • 1
    I just wanted to know how The Image component determines which device size image will be used. I think you didn't understand my problem. – Daniel Li Nov 05 '20 at 08:33
0

You need to check your devicePixelRatio.

I also got confused when the image that got loaded is always twice the size of my viewport.

I think the browser decide to load the image that is nearest to viewportwidth * devicePixelRatio in my case devicePixelRatio = 2.

puge
  • 9
  • 1