nginx通过预生成webp文件+map解析accept头+try_files匹配实现零开销静态适配，需在http块配置map与types，location中添加add_header vary accept及对应try_files顺序，并确保.webp文件与原图同路径同名仅后缀扩展。

Nginx 支持 WebP 等现代图片格式的静态分发，核心是不依赖实时转换，而是靠预生成文件 + 请求协商 + 正确响应头实现零开销、高兼容的自动适配。整个过程无需 PHP 或额外服务，纯配置驱动。

注册 WebP 和其他现代格式的 MIME 类型

Nginx 必须识别 `.webp`、`.avif`、`.jxl` 等后缀对应的内容类型，否则浏览器可能拒绝渲染或触发下载： - 打开 `/etc/nginx/mime.types`（或主配置 `http { }` 块内 `types { }` 区域） - 确保包含以下几行：

image/webp webp;
image/avif avif avifs;
image/jxl jxl;

- 若使用 `include mime.types;`，修改该文件；否则直接在 `http { }` 中内联 `types` 块 - 修改后必须执行 `nginx -t && nginx -s reload`

用 map + try_files 实现 WebP 自动回退

这是最关键的一步，让同一 URL（如 `/img/photo.jpg`）在支持 WebP 的浏览器中返回 `/img/photo.jpg.webp`，否则返回原图： - 在 `http { }` 块顶层（不能放在 `server` 或 `location` 内）添加：

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

- 在处理图片的 `location` 块中（如 `location ~* \.(jpg|jpeg|png|gif)$`），替换 `try_files` 行为：

try_files $uri$webp_suffix $uri =404;

Nginx Config Linter

对 Nginx 配置文件进行语法检查、验证和安全、性能审计。

下载

- 要求 WebP 文件与原图路径完全一致，仅多一个 `.webp` 后缀（例如 `/img/photo.jpg` → `/img/photo.jpg.webp`）

声明 Vary 和差异化缓存策略

避免 CDN 或代理缓存错版本，同时提升命中率： - 在同一 `location` 块中加：

add_header Vary Accept;

- 可选：对 WebP 设置更长缓存时间（如 1 年），其他图片设为 7 天：

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

验证是否生效的三步检查法

配置完别急着上线，逐项确认： - 用 curl 检查响应头：curl -H "Accept: image/webp" -I https://yoursite.com/test.jpg，应返回 `Content-Type: image/webp` - 手动确认文件存在：ls /path/to/test.jpg.webp，且 Nginx 进程有读取权限 - 浏览器 Network 面板查看该请求的 Response Headers，必须含 `Vary: Accept`，否则缓存会出错

不复杂但容易忽略