为什么即使使用 next/image 渲染，图像也会以全尺寸加载？答案

【问题标题】：Why is image loading at full size even though rendered using next/image?为什么即使使用 next/image 渲染，图像也会以全尺寸加载？
【发布时间】：2022-06-26 09:46:50
【问题描述】：

我正在渲染 image，原始大小为 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>

关于暂存/本地环境：

通过服务器提供的图像：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 上。如果需要更多详细信息，请告诉我。

【问题讨论】：

能否链接到使用此图片的生产页面？
你能不能给我们看看你的next.config.js文件？
发现这篇文章：github.com/vercel/next.js/issues/21701，将在实施此处提到的解决方案后更新。

标签： next.js nextjs-image image-optimization

【解决方案1】：

问题是 CDN 没有将 Accept 标头转发到源 (NextJS)。

正如answer 中提到的，“NextJS 根据 Accept 标头决定是否将图像提供为 webP 和 jpg/png/svg 等。在当前设置下，CDN 不会将 Accept 标头转发到原点”

【讨论】：