Nginx可通过map+try_files实现WebP自动适配：先用map根据Accept头映射.webp后缀，再用try_files按$uri.webp→$uri顺序匹配，配合Vary Accept、正确MIME类型及缓存策略完成高效无损适配。
要在 Nginx 中实现 WebP 格式图片的**自动适配转换**（即：当浏览器支持 WebP 时返回 WebP 图片，否则回退为原图），Nginx 本身不直接生成 WebP，但可通过 条件判断 + 预先生成的 WebP 文件 实现高效、零实时压缩的“自适应”服务。核心思路是：检查请求头 Accept 是否包含 image/webp，再结合 WebP 文件是否存在，决定返回 .webp 还是原图（如 .jpg/.png）。
前提：准备好 WebP 文件
WebP 转换需离线完成（推荐使用 cwebp 工具批量生成），确保每张原图（如 photo.jpg）旁有同名 WebP 文件（photo.jpg.webp）或统一后缀（如 photo.webp）。常用命名方式：
-
/images/banner.png→ 对应/images/banner.png.webp - 或统一用
.webp后缀：/images/banner.png→/images/banner.webp（需重命名或软链）
配置 accept 头检测与文件存在判断
在 server 或 location 块中添加以下逻辑（以 .jpg/.png → .jpg.webp/.png.webp 方式为例）：
location ~ \.(jpg|jpeg|png|gif)$ {
# 检查浏览器是否支持 WebP
if ($http_accept ~* "image/webp") {
# 尝试查找同名 .webp 文件（带原始扩展名）
add_header Vary Accept;
set $webp_suffix ".webp";
set $webp_file "$request_filename$webp_suffix";
<pre class="brush:php;toolbar:false;"> # 若 .webp 文件存在，则重写为该路径并终止后续处理
if (-f $webp_file) {
rewrite ^(.*)$ $1$webp_suffix break;
}
}}
⚠️ 注意：if 在 location 中慎用，更健壮的方式是用 try_files + map（推荐）：
推荐方案：用 map + try_files 实现无 if 的优雅路由
在 http 块中定义映射：
map $http_accept $webp_suffix {
default "";
"~*image/webp" ".webp";
}在对应 location 中使用：
location ~ \.(jpg|jpeg|png|gif)$ {
add_header Vary Accept;
# 尝试匹配 .webp 文件；不存在则用原路径
try_files $uri$webp_suffix $uri =404;
}✅ 优势：不依赖 if，性能更好，逻辑清晰；Nginx 会按顺序检查 $uri.webp → $uri，自动选择可用资源。
补充：确保 MIME 类型正确 & 缓存策略合理
WebP 文件需被识别为 image/webp，在 http 块中确认已包含：
include mime.types; default_type application/octet-stream; <h1>mime.types 中应有：</h1><h1>image/webp webp;
同时建议为图片设置缓存头（在 location 内）：
expires 1y; add_header Cache-Control "public, immutable";
这样浏览器和 CDN 都能长期缓存 WebP 版本，提升重复访问速度。
