'next/image loads very big images

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?

Solution 1:^[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)

Solution 2:^[2]

I think it's happening due to

layout="responsive

As per `next`'s documentation:

layout

When fixed, the image dimensions will not change as the viewport changes (no responsiveness) similar to the native img element.

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

When responsive, the image will scale the dimensions down for smaller viewports and scale up for larger viewports.

When fill, the image will stretch both width and height to the dimensions of the parent element, usually paired with the objectFit property.

Find out more here:- next/image

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Senad Mehic
Solution 2	Aniket Kolekar

'next/image loads very big images

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]