为什么图像加载在全尺寸，即使使用next/image渲染?

Question

我正在像这样渲染原始大小为1.4MB (1440 X 600)的图像:

<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_url
• 网络选项卡显示资源类型为image/webp和统计如下:

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

生产环境:

• 通过服务器提供的图像:image_url
• 网络选项卡显示资源类型为image/png和统计如下:

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

是什么导致了这种行为?为什么图像优化在生产中不起作用?

我使用Next 10.0.5，网站部署在AWS上。如果需要更多的细节，请告诉我。

Answer 1

问题是CDN没有将Accept报头转发到原点(NextJS)。

正如在这个答案中提到的"NextJS决定是否将图像作为webP或jpg/png/svg等，这取决于Accept报头。在当前设置下，CDN不会将Accept标头转发到原始的">