How to properly build the next/image component <image/>?

[Rossere]

Framworth Next.js. I use the next image component:

<ImageContainer >
<Image
  alt={"some alt"}
  src={imageUrl}
  height={imageHeight}
  width={imageWidth}
/>
</ImageContainer>

The size of my container (all content) has a maximum width of 1150px and images are always in this container. But the next image uses a 1920px image (for my screen). https://i.imgur.com/l85veAj.png That's too much! My plan is to build a configuration like:

module.exports = {
  images: {
    deviceSizes: [640, 750, 828, 1080, 1150],
  },
}

I mean, put a maximum width of 1150 like my container. Is that a bad idea? What do you going to advise me to do to avoid overloading too much image?

[Alberto]

For a container with a rigid 1150px, good, the image must be twice as large, for displays with devicepixelratio = 2 (macco and imaca with a rib) but, at the same time, so many Brakeponets may not be needed, savings in the amount of a jeep between 640 and 750 may not be so large to create a separate set.