为Next.js的Image组件提供图片源的最优方案是什么？

浏览器不支持 WebP 时的处理逻辑 #

• 如果你使用 Next.js 原生自带的图片优化能力（未自定义 loader），组件后端的优化服务会自动读取请求头的 Accept 字段判断浏览器支持的图片格式，如果不支持 WebP 会自动回退返回 JPG/PNG 等兼容格式，无需额外配置。
• 如果你自定义了 loader 完全走 CDN 的图片生成逻辑，Next.js 本身不会做格式适配处理：要么你在 loader 逻辑里做浏览器支持判断拼接不同格式的参数，要么开启 CDN 的自适应格式能力，让 CDN 根据请求头自动返回对应格式，否则写死返回 WebP 会导致低版本浏览器图片加载失败。

原生优化与自定义 CDN loader 的选择建议 #

• 若站点部署在 Vercel 平台、图片量级较小，直接用原生优化能力成本最低，无需额外开发即可获得自动格式适配、多尺寸生成、全局缓存等能力。
• 若站点图片量级大、已经采购了支持图片处理的 CDN，优先选择自定义 loader 走 CDN 优化：CDN 边缘节点分布更广、图片处理算力独立，不会占用 Next.js 服务的运算资源，高并发场景下性能更稳定，整体资源成本也通常低于平台自带的图片优化计费。

最佳实践：搭配 CDN 使用时建议开启 CDN 的「内容协商自适应格式」能力，不需要在 loader 里写死 WebP 格式参数，CDN 会自动根据浏览器支持情况返回最优格式，同时保留多尺寸、质量调整的能力，兼顾性能和兼容性。

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