Nginx 实现 WebP 智能分发需四步：一、在 mime.types 中添加 image/webp webp；二、用 map 解析 Accept 头设 $webp_suffix；三、在图片 location 中用 try_files $uri$webp_suffix $uri =404 实现回退；四、加 add_header Vary Accept 并用 map 配合 expires 设置差异化缓存。
要让 Nginx 实现 WebP 图片的智能按需分发，核心不是“实时转换”，而是“按浏览器能力 + 文件存在性”做精准匹配与回退。它不依赖 PHP 或后端逻辑，纯靠 Nginx 配置即可完成——前提是 WebP 文件已预先生成好（如用 cwebp 批量转出），且命名/路径规则一致。
一、确保 WebP MIME 类型被识别
Nginx 必须知道 .webp 对应什么类型，否则即使文件存在，浏览器也可能拒绝渲染或触发下载：
- 打开主配置文件（如
/etc/nginx/nginx.conf或 phpEnv 的nginx.conf） - 在
http { }块内找到types { }区域（通常在include mime.types;后面） - 添加一行：
image/webp webp;
二、用 map 指令解析 Accept 请求头
浏览器是否支持 WebP，由请求头 Accept: image/webp 决定。Nginx 用 map 把它转成可复用的变量：
- 在
http { }块顶部（server 外）添加：
"~*webp" ".webp";
default "";
}
-
~*webp表示忽略大小写匹配字符串webp；匹配成功时变量值为.webp，否则为空 - 这个变量后续用于拼接文件路径，不参与缓存或重写逻辑
三、在图片 location 中启用 try_files 自动回退
这是最关键的一步：让 Nginx 按顺序检查“WebP 版本是否存在 → 原图是否存在 → 返回 404”：
- 在站点的
server { }块中，找到处理图片的 location，例如：
- 把其中的
try_files行替换为：
- 比如请求
/images/photo.jpg，Nginx 先查/images/photo.jpg.webp；存在就返回，不存在就 fallback 到/images/photo.jpg - 注意：该方式要求 WebP 文件与原图同名+追加
.webp后缀（如photo.jpg.webp），不是photo.webp
四、强制声明 Vary 和差异化缓存
不加 Vary: Accept，CDN 或代理可能把 WebP 版本缓存下来，再给不支持 WebP 的用户返回，造成白屏或乱码：
- 在同一个 location 块中，加上：
- 若还需对 WebP 设置更长缓存（比如 1 年），可用
map+expires：
"~*image/webp" "1y";
default "7d";
}
expires $webp_cache_time;
- 放在图片 location 内，Nginx 会根据实际响应的 Content-Type 自动设置过期时间
