nginx 可零开销自动返回预生成 webp 文件，需确保 mime 类型注册（image/webp webp;）、map+try_files 正确配置（map 在 http 块顶层、路径一致）、vary accept 头与差异化缓存同步生效，缺一不可。
Nginx 本身不生成 WebP，但能零开销自动返回预生成的 .webp 文件——前提是配置对、文件在、头和缓存也配齐；否则浏览器明明支持 WebP，你还是只看到 JPG。
确认 WebP MIME 类型已注册
如果 Nginx 不认识 .webp 后缀，即使文件存在，也会返回 404 或触发下载而非渲染。必须显式声明类型：
- 打开
/etc/nginx/mime.types（或主配置中types { }块） - 确保包含这一行：
image/webp webp; - 若使用
include mime.types;，该行必须在types文件内；否则直接加到http { }块里 - 改完后执行
nginx -t验证，再nginx -s reload
用 map + try_files 实现自动回退
这是最稳定、无性能损耗的方式，依赖预生成的 .webp 文件（如 /images/photo.jpg.webp），不是实时转换。
-
map必须写在http { }块顶层，不能放server或location内，否则报错"map directive is not allowed here" - 推荐写法：
map $http_accept $webp_suffix { "~*webp" ".webp"; default ""; } - 图片
location中用：try_files $uri$webp_suffix $uri =404;——顺序不能颠倒，否则跳过 WebP - 注意路径一致性：若原图是
/a/b/c.png，WebP 必须是/a/b/c.png.webp；try_files不会帮你改扩展名
Vary Accept 和缓存策略必须同步生效
不加 Vary: Accept，CDN 或代理会把 WebP 版本缓存下来，再给不支持 WebP 的用户返回，导致白屏或乱码。
- 在匹配图片的
location块中加：add_header Vary Accept; - 避免在
root或alias混用：若用了alias /data/img/;，$uri不含前缀，$uri.webp就会拼成错误路径（如/photo.jpg.webp而非/data/img/photo.jpg.webp） - 可配合
expires差异化缓存：map $sent_http_content_type $cache_time { "~*image/webp" "1y"; default "7d"; }，再在 location 中写expires $cache_time;
常见故障排查点
配置看似正确却始终返回原图？优先检查这四件事：
- 用
curl -H "Accept: image/webp" -I http://yoursite.com/test.jpg看响应头是否含Content-Type: image/webp - 手动
ls /path/to/test.jpg.webp，确认文件真实存在且权限可读 - 检查
nginx -t输出是否有 warning，比如duplicate MIME type "image/webp" - 浏览器开发者工具 Network 标签页中，查看该请求的
Response Headers是否含Vary: Accept；不含说明配置未生效
真正的难点不在语法，而在路径、头、缓存三者必须严丝合缝——少一个环节，WebP 就只是个摆设。
