内容提要
本文探讨了如何在使用 Next.js 和 Cloudflare 进行图片优化时降低成本。默认的图片优化缺乏缓存机制，导致每次请求都需重新处理图片。通过自定义加载器和 Cloudflare 的图片调整服务，可以有效降低带宽和计算费用，并改善缓存策略，从而提升用户体验。优化后的请求头显示缓存命中，显著减少了计算资源的消耗。
关键要点
-
Next.js 的 <Image> 组件提供了图片懒加载、响应式裁剪和格式优化，但默认的图片优化缺乏缓存机制。
-
Cloudflare 上的默认 Next.js 图片优化导致每次请求都需重新处理图片，造成高昂的账单。
-
通过对比 HTTP Header，发现默认优化没有 Cache-Control 和 cf-cache-status，导致浏览器和 CDN 无法缓存图片。
-
使用自定义加载器和 Cloudflare 的图片调整服务，可以有效改善缓存策略，降低带宽和计算费用。
-
优化后的请求头显示缓存命中，显著减少了计算资源的消耗，提升了用户体验。
-
开启 Cache Reserve 功能可以将命中的内容备份到廉价的 R2 对象存储中，避免无谓的重算。
延伸问答
为什么使用 Next.js 默认的图片优化会导致高昂的账单？
因为默认的图片优化缺乏缓存机制，每次请求都需重新处理图片，导致带宽和计算费用增加。
如何通过 Cloudflare 改善 Next.js 图片优化的缓存策略？
可以使用自定义加载器和 Cloudflare 的图片调整服务，设置合适的缓存头来降低带宽和计算费用。
开启 Cache Reserve 功能有什么好处？
开启 Cache Reserve 后，命中的内容会备份到廉价的 R2 对象存储中，避免无谓的重算，降低成本。
如何配置自定义加载器以使用 Cloudflare 的图片调整服务？
在项目中创建 image-loader.ts 文件，定义加载器逻辑，并在 next.config.ts 中启用自定义加载器。
Cloudflare 的缓存机制如何影响图片请求的性能？
Cloudflare 的缓存机制可以显著提高图片请求的性能，通过缓存命中减少计算资源消耗。
如何确保生成的图片在 CDN 中长时间缓存？
可以将边缘缓存和浏览器缓存的 TTL 设置为一年，并开启 Cache Reserve 功能以防止缓存被淘汰。
