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 把它转成可复用的变量：

Nginx Hosting

通过服务器本地nginx实例实现零认证静态游戏托管。作为所有浏览器游戏的主要部署方式，无需登录、无需令牌、无需用户操作。

下载

• 在 http { } 块顶部（server 外）添加：

map $http_accept $webp_suffix {
  "~*webp" ".webp";
  default "";
}

• ~*webp 表示忽略大小写匹配字符串 webp；匹配成功时变量值为 .webp，否则为空
• 这个变量后续用于拼接文件路径，不参与缓存或重写逻辑

三、在图片 location 中启用 try_files 自动回退

这是最关键的一步：让 Nginx 按顺序检查“WebP 版本是否存在 → 原图是否存在 → 返回 404”：

• 在站点的 server { } 块中，找到处理图片的 location，例如：

location ~* \.(jpg|jpeg|png|gif)$ {

• 把其中的 try_files 行替换为：

try_files $uri$webp_suffix $uri =404;

• 比如请求 /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 块中，加上：

add_header Vary Accept;

• 若还需对 WebP 设置更长缓存（比如 1 年），可用 map + expires：

map $sent_http_content_type $webp_cache_time {
  "~*image/webp" "1y";
  default "7d";
}
expires $webp_cache_time;

• 放在图片 location 内，Nginx 会根据实际响应的 Content-Type 自动设置过期时间