Why is image loading at full size even though rendered using next/image?

I am rendering image with original size 1.4MB (1440 X 600) like this:

<Grid item md={9} sm={12}>
    <Box
      position="relative"
      width="100%"
      height="400px"
      overflow="hidden"
     >                  
        <Image
          src={image_url}
          layout="fill"
          objectFit="cover"
          objectPosition="50% 50%"
          quality={60}
        />           
    </Box>
</Grid>

<Grid item md={3} sm={12}>
   ... right side
</Grid>

On staging / local env:

• Image served through server: image_url
• Network tab show resource type as image/webp and stats are:

On wide-screen (1020px width)
Rendered size:  736 × 352 px
File size:  42.6 kB

On small-screen (600px width)
Rendered size:  568 × 304 px
File size:  37.6 kB

On production env:

• Image served through server: image_url
• Network tab show resource type as image/png and stats are:

On wide-screen (1020px width)
File size:  1.4 MB

On small-screen (600px width)
File size:  1.2 MB

What is causing this behaviour? Why is image optimization not working on production?

I am using Next 10.0.5 and the website is deployed on AWS. Let me know if any more details are needed.

The issue was CDN was not forwarding the Accept header to the origin (NextJS).

As mentioned in this answer "NextJS decides whether to serve the image as webP vs jpg/png/svg etc. depending on the Accept header. With the current settings, CDN would not forward the Accept header to the origin"