Next.js Image组件为何未输出WebP格式？（v13.2.4）

排查步骤与解决方案 #

1. 强制清除Next.js缓存 #

开发环境中Next.js会缓存已处理的静态资源，可能导致新的格式配置不生效：

• 停止开发服务器
• 删除项目根目录下的.next文件夹
• 重启npm run dev，重新加载页面后查看Network面板的图片请求

2. 验证配置与请求响应 #

• 确认next.config.js的images.formats配置正确（你当前的配置无语法问题）
• 打开浏览器开发者工具的Network标签，筛选图片请求：
  • 查看请求URL是否包含/_next/image前缀
  • 检查响应头的Content-Type是否为image/webp
  • 如果响应仍为原格式，说明图片未被重新处理，需再次确认缓存已清除

3. 检查本地图片处理逻辑 #

Next.js对public目录下的本地图片，会在构建/开发时自动转换格式，但需注意：

• 确保图片导入路径正确（你的代码中Banner的导入路径无问题）
• 必须通过Image组件的src传入导入的静态资源，避免直接使用原始图片URL（如src="/lake.jpg"）

4. 额外优化建议（缩短加载时间） #

• 添加placeholder="blur"属性，生成模糊占位图，提升用户加载感知：

  <Image 
    priority 
    src={Banner} 
    alt="" 
    quality={30} 
    width={1422} 
    placeholder="blur"
  />
  

• 生产环境使用CDN加速：本地开发的加载速度通常慢于生产CDN环境，这可能是和Gatsby加载速度差异的核心原因之一（Vercel部署会自动启用CDN）
• 尝试升级Next.js到13.2.x最新小版本，13.2.4存在部分图片处理的小bug，升级后可能解决格式转换问题

5. 浏览器兼容性验证 #

虽然主流浏览器都支持WebP，但可以快速确认：

• Chrome浏览器可输入chrome://flags/#enable-webp检查WebP支持是否开启
• 测试Firefox、Edge等其他浏览器，排除单一浏览器的兼容性问题

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