WebP格式化在CDN边缘做是为了动态适配客户端支持情况并避免404。通过检查Accept头、排除爬虫、重写URL添加.webp后缀或format参数，结合Vary头与缓存键区分，实现轻量可控的WebP交付。
WebP 格式化为什么要在 CDN 边缘做？
浏览器支持 WebP 但源站没生成对应文件，直接回源拉 WebP 图片会 404。CDN 边缘节点介入，能根据请求头（如 Accept: image/webp）动态改写 URL 或添加参数，让源站识别并返回 WebP 版本——这比全量预生成或服务端实时转码更轻量、更可控。
CDN 边缘如何识别 WebP 请求并改写回源
关键在判断客户端是否支持 WebP，并将意图“告诉”源站。常见做法是利用请求头 + URL 重写：
- 检查 Accept 头是否含 image/webp，且不是爬虫（可排除 User-Agent 中的 bot、curl 等）
- 若匹配，在回源 URL 后追加 ?format=webp 或改写路径为 /img/logo.webp
- 源站收到带 format 参数或 .webp 后缀的请求，返回对应 WebP 文件（需提前部署或按需生成）
- CDN 缓存时区分 Vary: Accept 或自定义 Vary 头（如 Vary: X-Accept-WebP），避免 WebP 内容被非 WebP 客户端误取
Nginx 在边缘节点的实际配置示例
若 CDN 边缘使用 Nginx（如自建边缘集群或支持 Nginx 配置的 CDN），可这样落地：
- 用 map 指令提取 WebP 支持信号：
map $http_accept $webp_suffix {
~*webp ".webp";
default "";
} - 在 location 中重写回源地址：
proxy_pass https://origin.example.com$request_uri$webp_suffix;
（注意：$request_uri 已含 query，若用 $uri 则需手动拼接参数） - 设置缓存键与 Vary：
proxy_cache_key "$scheme$request_method$host$uri$is_args$args$webp_suffix";
add_header Vary "Accept";
源站配合要点：别让 WebP 请求卡住
边缘改写了，源站得接得住：
- 静态资源目录下同时存放 logo.png 和 logo.png.webp（推荐），或统一用 .webp 后缀（如 /img/logo.webp）
- 若用 format 参数（如 ?format=webp），后端需识别并响应对应 MIME 类型：image/webp，且 HTTP 状态为 200
- 确保 WebP 文件真实存在——边缘不会校验，404 会直接透传给用户
- 建议源站也返回 Content-Length 和 Cache-Control，便于边缘高效缓存
