next/image loads very big images

Question

I am using Next js in my project and using next/image for loading images. My page is roughly 1600px wide and has 3 thumbnails per row which are of 500px in width as seen below.

So I needed next/image to load 500px width versions of the thumbnails but it loads the image with 1600px width.

here's the component I've used

import Image from 'next/image';

<Image
  src={article.thumbnail}
  width={500}
  height={277}
  layout="responsive"
/>

my next.config.js:

module.exports = {
  images: {
    domains: ['res.cloudinary.com'],
    deviceSizes: [320, 640, 660, 768, 1024, 1600],
    loader: 'cloudinary',
    path: 'https://res.cloudinary.com/pratiek/',
  }
};

the output that next gives on HTML looks as follows:

<div style="display:block;overflow:hidden;position:relative;box-sizing:border-box;margin:0">
   <div style="display:block;box-sizing:border-box;padding-top:55.400000000000006%"></div>
   <img 
    src="https://res.cloudinary.com/pratiek/f_auto,c_limit,w_1600,q_auto/strapi_7efe62d320.png" 
    decoding="async" 
    style="visibility: inherit; position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;" 
    sizes="100vw" 
    srcset="
      https://res.cloudinary.com/pratiek/f_auto,c_limit,w_320,q_auto/strapi_7efe62d320.png 320w,
      https://res.cloudinary.com/pratiek/f_auto,c_limit,w_640,q_auto/strapi_7efe62d320.png 640w,
      https://res.cloudinary.com/pratiek/f_auto,c_limit,w_660,q_auto/strapi_7efe62d320.png 660w,
      https://res.cloudinary.com/pratiek/f_auto,c_limit,w_768,q_auto/strapi_7efe62d320.png 768w,
      https://res.cloudinary.com/pratiek/f_auto,c_limit,w_1024,q_auto/strapi_7efe62d320.png 1024w,
      https://res.cloudinary.com/pratiek/f_auto,c_limit,w_1600,q_auto/strapi_7efe62d320.png 1600w"
    />
</div>

I think the last line is what is wrong with the output, it is calling for 1600px image on 1600px viewport, but I need 500px image on 1600px viewport, how do I get that?

Answer 1

It looks like you should add sizes={"30vw"} prop to your images to get what you want. According to nextjs doc on sizes default is 100vw and when you use layout="responsive nextjs loads the image to fit the entire screen.

With sizes={"30vw"} you are saying this image will be one third of the entire viewport and you'll probably get 640px wide image since that's the closest larger breakpoint in your deviceSizes: [320, 640, 660, 768, 1024, 1600]. (1600px / 3 = ~530px)