Next.js next/image生产环境加载全尺寸原图优化失效问题

从两个环境的返回差异可以判断：staging环境图片优化链路正常，生产环境完全没有触发压缩、格式转换、尺寸裁剪逻辑，直接返回了接近原始大小的PNG图片，常见原因按出现概率排序如下：

• 生产环境sharp依赖加载失败
  Next.js 10.x 版本的图片优化能力优先依赖二进制依赖sharp完成格式转换、尺寸裁剪、质量压缩。该依赖和运行环境的操作系统、CPU架构强绑定，且不会被默认作为生产依赖强制打包。
  如果你本地/staging环境在Mac/Windows系统运行，生产部署在AWS的Amazon Linux环境（EC2/ECS/Lambda），直接拷贝本地构建的node_modules部署会导致sharp二进制不兼容、无法加载。Next 10.0.5存在已知降级bug：当sharp加载失败时，PNG格式图片的处理会跳过所有压缩、裁剪、WebP转换逻辑，直接透传原图，和你观察到的现象完全吻合。
  验证方式：在生产运行环境执行node -e "require('sharp')"，如果抛出报错即可确认问题。修复方式为在生产环境运行时重新执行npm rebuild sharp；如果是Lambda/Amazon Linux 2部署环境，可在构建前执行npm install --arch=x64 --platform=linux sharp安装对应架构的依赖包，同时把sharp明确添加到package.json的dependencies字段中。
• CDN层过滤了图片优化依赖的请求头
  如果生产环境在Next服务前挂载了AWS CloudFront等CDN，默认缓存策略不会把Accept、DPR、Viewport-Width等请求头透传给源站，也不会将这些头加入缓存键：
  • 源站收不到带image/webp的Accept头时，不会返回WebP格式图片
  • 如果CDN首次回源时拿到了异常响应并直接缓存，会导致所有用户拿到未优化的原图
    验证方式：绕开CDN直接访问生产源站的/_next/image路径，如果返回的是压缩后的WebP图片即可确认问题在CDN层，修改CDN源请求策略透传相关请求头、调整缓存键配置即可修复。
• 配置项错误触发降级逻辑
  检查生产环境加载的next.config.js配置：
  1. 确认images配置下没有开启unoptimized: true，该配置会完全关闭图片优化能力
  2. 确认S3存储的域名正确添加到images.domains列表中，无区域、域名后缀拼写错误，域名配置不匹配时10.0.5版本存在直接透传原图的已知bug

补充说明：你当前使用的Next 10.0.5是较早的迭代版本，图片优化模块存在多个边界场景bug，如果排查完上述问题仍有异常，可以升级到10.x系列的最终稳定版v10.2.3，小版本升级无破坏性变更，可修复大部分已知的图片优化问题。

内容的提问来源于stack exchange，提问作者Anshul M