当你的网站即将触及Vercel免费图片优化上限时该怎么办
内容提要
作者因Vercel免费额度警告，发现其网站大量图片来自freeCodeCamp等外部CDN，导致图片优化配额超限。他选择将所有691张图片迁移至自己的Cloudflare R2存储，并更新代码配置，彻底解决依赖问题。此举虽耗时，但长期更稳定，避免外部链接失效和配额浪费。
延伸解读
配额消耗的隐蔽来源
Vercel 的图片优化配额不仅统计本站图片，还会统计通过 next/image 加载的外部图片。作者发现大量来自 freeCodeCamp 和 Hashnode 的图片被优化，导致配额超限。这提醒开发者，使用 next/image 时，remotePatterns 中的外部域名都会消耗配额，需定期检查用量，避免不必要的消耗。
两种修复方案的权衡
面对外部图片导致的配额问题，作者对比了两种方案：一是设置 unoptimized 跳过优化，简单但失去响应式尺寸和现代格式，且仍依赖外部 CDN；二是将图片迁移到自有存储，虽耗时但彻底解决依赖。作者选择后者，因为长期更稳定，且能统一优化流程。这提示开发者，短期省事可能带来长期隐患。
迁移流程的自动化实践
作者通过编写 Node 脚本，自动下载 691 张外部图片，上传至 Cloudflare R2，并批量替换 MDX 中的 src 属性，最后清理 remotePatterns 配置。整个过程包括验证和构建测试，确保无遗漏。这种自动化迁移方法可复用于类似场景，减少手动操作错误，提高效率。
预防性维护的重要性
作者反思，最初添加外部域名到 remotePatterns 是快速修复，但未考虑长期影响。他建议在引入外部资源前，先问是否应自托管，避免后续大量迁移。这强调了在内容回填时，应提前规划资源托管策略，防止依赖外部服务带来的不确定性和配额浪费。
Q&A
为什么我的Vercel图片优化配额会超限？
Vercel的图片优化配额超限通常是因为网站中的图片被Next.js的Image组件处理，包括从外部CDN（如freeCodeCamp）加载的图片。这些外部图片也会经过Vercel的优化管道，消耗配额。
如何检查哪些图片消耗了Vercel的图片优化配额？
可以通过Vercel的usage面板查看消耗配额的图片来源。作者发现大部分图片来自freeCodeCamp和Hashnode的CDN，因为这些图片被next/image组件处理并经过Vercel优化。
解决Vercel图片优化配额超限有哪些方案？
有两种方案：1) 对来自外部CDN的图片使用unoptimized属性，让浏览器直接加载，不经过Vercel优化；2) 将所有外部图片下载并重新托管到自己的CDN（如Cloudflare R2），并更新图片链接。
为什么选择将图片迁移到自己的Cloudflare R2存储？
因为使用unoptimized会失去响应式尺寸和现代格式优化，且仍依赖外部CDN的稳定性。迁移到自己的R2存储可以统一管理所有图片，保持优化效果，并消除外部依赖。
如何将外部图片迁移到Cloudflare R2？
步骤包括：1) 用脚本下载所有外部图片；2) 将图片上传到R2存储桶；3) 验证上传的URL可访问；4) 用脚本更新MDX文件中的图片链接；5) 从next.config.ts中移除外部域名配置。
迁移图片后如何清理Next.js配置？
从next.config.ts的images.remotePatterns中移除不再需要的外部域名（如freecodecamp.org和hashnode.com），然后运行生产构建确保一切正常。
如何避免未来再次出现类似问题？
在回填内容时，应先将图片下载并重新托管到自己的CDN，而不是直接引用外部链接。作者建议在添加外部图片前问自己是否应该托管在自己的CDN上。
