图片 CDN 实战

一个 URL 的多种形态

接入 CDN 后不久，我遇到了一个问题：同一个图片在前端需要展示不同尺寸。

每种尺寸都需要预先生成、单独存储、各自缓存。100 万张原图 × 5 种尺寸 × 2 种格式 = 1000 万个文件。

有没有更优雅的方式？

有的——URL 参数化实时裁剪。让 CDN 在用户请求时动态生成需要的尺寸：

CDN 收到这个请求后，从源站获取原图，按参数裁剪，缓存结果，返回给用户。

缓存 Key 设计

URL 参数化后，缓存 key 的设计变得至关重要——不同的参数组合会生成不同的缓存 key。

URL 参数化实时裁剪

CDN 本身不提供图片处理能力，需要配置”回源重写 + 图片处理服务”：

方案一：OSS 图片处理

阿里云 OSS 自带图片处理能力，可以通过 URL 参数直接处理：

方案二：自建图片处理服务

OSS 图片处理虽然方便，但功能有限，且每张图片每次处理都要收费。如果需要更灵活的处理能力，可以自建：

CDN 缓存策略配置

Vary 头的作用

回源优化

前端响应式图片

配合 CDN 的 URL 参数化，前端可以实现真正的响应式图片：

浏览器会自动选择最合适的尺寸——手机上加载 400px 版本，桌面端加载 1200px 版本。