Next.js Image优化后文件体积不降反升的问题排查咨询

这个表现不符合Next.js图片优化的预期，你的代码和配置均存在错误，具体问题及修复方法如下：

核心问题原因 #

• 质量参数配置错误：你在代码中强制设置默认质量为100，该等级对应无损压缩逻辑。你原始208KB的图片大概率本身是经过高压缩率处理的有损编码（如高压缩比JPG、WebP），Next.js用100质量对该源文件重新转码时，会用无损编码覆盖原有高压缩逻辑，最终导出体积暴涨。
• 域名配置不规范：next.config.js中images.domains仅需要填写纯域名，不需要带协议和末尾斜杠，你配置里的https://api.somedomain.com/是无效值，可能触发异常的优化 fallback 逻辑。
• 未指定图片尺寸：你使用的旧版next/image组件（Next.js 12及更早版本）如果没有传入明确的width/height属性，也没有指定layout属性，会自动匹配当前设备的最大可用尺寸加载图片，你配置的deviceSizes最大值为3840，大于原始图的3488宽度，相当于强制拉大图片分辨率后输出，体积自然上升。
• 输出格式无限制：如果你的原始图片本身是已经压缩好的WebP/AVIF格式，没有指定输出格式的前提下，Next.js重复转码也可能导致体积变大。

修复方案 #

1. 调整默认质量参数，将默认值改为Next.js官方默认的75即可：

quality={quality ?? 75}

2. 修正next.config.js的域名配置：

module.exports = {
  env: {
    API_DOMAIN: 'https://api.somedomain.com/web-api/v1.0',
    IMAGE_DOMAIN: 'https://api.somedomain.com',
  },
  images: {
    domains: ['api.somedomain.com'],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
  },
}

3. 使用ExternalImage组件时必须传入明确的width、height属性，或者根据场景指定layout属性，避免加载超出实际渲染尺寸的图片。
4. 如果你的源图片已经提前做好了压缩处理，不需要Next.js二次优化，可以直接给Image组件添加unoptimized属性跳过优化流程，直接加载原始资源即可。

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