NextJS Image fetching huge images with layout='fill'

Question

So, im using cloudinary to serve properly sized images, however, nextJS image seems to be alwasy fetching with w_3840, so images with width of 3840, instead of fixed value.

  <Image
    src={loaderUrl(logoImage)}
    alt=""
    role="presentation"
    objectFit={'contain'}
    layout={'fill'}
    loader={logoImageLoader}
    priority
  />

Which is wrapped in div with position: relative and fixed height and width.

The loader is as follows

export const logoImageLoader: ImageLoader = ({
  src,
  width,
  quality,
}: ImageLoaderProps): string => {
  const params = [
    'f_auto',
    'c_pad',
    'g_south_west',
    'ar_270:148',
    `w_${width}`,
    `q_${quality || 'auto'}`,
  ].join(',');
  return `${root}${params}${src}`;
};

And then when i reload the page and inspect image src, i get query like f_auto,c_pad,g_south_west,ar_270:148,w_3840,q_auto/…

So if im understanding correctly, this image tag is fetching a image with width of 3840px, for container sized 270px x 148px. Why? How do i fetch images with correct size?

Wrapper css

.wrapper {
  position: relative;
  width: 223px;
  height: 148px;
  max-width: 100%;

  @include breakpoints.media(tablet) {
    width: 270px;
  }
}

Answer 1

I think the solution might be to add the sizes property to the Image component. From the Next.js documentation:

The value of sizes will greatly affect performance for images using layout="responsive" or layout="fill". (...) The value of sizes is used by the browser to determine which size of the image to download, from next/legacy/image's automatically-generated source set. (...) If you don't specify a sizes value, a default value of 100vw (full screen width) is used.

Answer 2

I had this issue as well, for some reason next sometimes wants

<Image
    src={loaderUrl(logoImage)}
    alt=""
    role="presentation"
    objectFit={'contain'}
    layout={'fill'}
    loader={logoImageLoader}
    priority
    sizes={'(max-width: 600px) 270px, 223px'}
  />

the "funny part is" that if you do not fill the default it will not compress