图片 CDN 让你只保存一份高分辨率原图，通过在 URL 上追加参数来请求任意衍生版本——宽度、格式、质量、裁剪。服务器生成一次、在边缘节点缓存，之后直接分发。

它为什么有吸引力

  • 单一事实来源。 不必在构建时预生成十几种尺寸，设计一改也不用全部重新生成。
  • 免费的格式协商。 多数服务会根据 Accept 头自动提供 AVIF 或 WebP。
  • 响应式图片变得极其简单：srcset 不过是同一个 URL 配不同的宽度参数。
  • 用户上传的内容与自有素材走同一套流程——当你无法控制别人上传什么时，这一点很重要。

常见参数

各家命名不同，但概念是通用的：

  • width / height——目标尺寸，通常带保持宽高比的选项。
  • fit / resize 模式——cover、contain、fill、inside。它决定比例不匹配时是裁切还是加边。
  • format——auto（协商）、webp、avif、jpeg、png。
  • quality——通常 1–100；"auto"模式会根据画面复杂度逐图选择。
  • crop / gravity——裁切时保留哪部分：居中、靠上，或智能/人脸感知选项。
  • DPR——设备像素比倍数，省得你自己算双倍宽度。

缓存键爆炸

每一种唯一的参数组合都是一个独立的缓存对象。如果你的前端生成任意宽度——比如精确等于 CSS 像素的容器宽度——同一张图可能产生上千个变体，每个都有各自的首次转换开销和缓存条目。

解法是纪律：定一组固定的宽度阶梯（例如 320、640、960、1280、1920），并总是向上取到最近的一档。这能让缓存保持命中、账单保持可预测。

成本控制

多数服务按转换次数、存储和带宽计费。实用手段：

  • 限制允许的参数取值，避免一个 bug 请求出一万个随机尺寸。
  • 设定最大输出尺寸。
  • 激进缓存、使用长 TTL——一次转换只该付一次钱。
  • 不要对很小的图做转换，开销会超过收益。

大家总会忘的安全设置

一个接受任意源 URL 的开放转换端点是可以被滥用的：陌生人用你的账户处理他们的图片，或构造请求猛砸你的源站。两种保护：

  • URL 签名——用签名证明这组参数确实来自你。
  • 源域名白名单，只允许抓取你自己的源站。

上线前至少启用一种。另外要意识到，公开的转换 URL 会暴露原图路径——如果原图分辨率高于你打算分发的水平，这就很要紧。

什么时候不该用

对于带构建步骤的小型静态站，构建时生成几种尺寸更简单、更便宜，也没有运行时依赖。图片 CDN 的价值体现在大规模素材库、用户生成内容，或频繁改版的场景。