宝塔WebP转换未生效的根本原因是Nginx未识别Accept头中的image/webp声明，需手动添加map规则、Vary头及try_files逻辑，并确保MIME类型正确、CDN透传Accept头、文件名匹配且GD库支持。
宝塔面板里 WebP 转换为什么没生效
常见现象是勾选了「自动转换 WebP」，但 Chrome DevTools 里看到图片仍是 .jpg 或 .png，Network 面板没有 Content-Type: image/webp 响应头。根本原因不是功能失效，而是 Nginx 没识别客户端支持能力——它默认不读取 Accept 请求头里的 image/webp 声明。
- 必须手动在站点配置中添加
map $http_accept $webp_suffix规则，否则宝塔的「开启 WebP」只是空转 - 宝塔 8.0+ 的「WebP 自动转换」仅对静态文件（
.jpg/.png）生效，PHP 动态生成的图片（如thumb.php?img=xxx）不会被重写 - 若网站启用了 CDN，且 CDN 没透传
Accept头，Nginx 根本收不到浏览器的 WebP 支持声明，后端无从判断
Nginx 配置 WebP 的最小必要代码段
直接进宝塔 → 网站 → 设置 → 配置文件，在 server 块最上方插入以下内容（位置错会导致 500 错误）：
map $http_accept $webp_suffix {
default "";
"~*webp" ".webp";
}
<p>server {</p><h1>... 原有配置</h1><pre class='brush:php;toolbar:false;'>location ~ .*\.(jpg|jpeg|png|gif)$ {
add_header Vary Accept;
try_files $uri$webp_suffix $uri =404;
}}
关键点：
-
add_header Vary Accept必须加，否则 CDN 或代理可能缓存错版本 -
try_files $uri$webp_suffix是核心逻辑：先找xxx.jpg.webp，找不到再回退到原图 - 不要用
rewrite或if判断，Nginx 官方明确反对在location中滥用if
WebP 文件怎么生成：别依赖宝塔自动生成
宝塔的「自动转换」实际是运行时按需生成并缓存，首次访问会卡顿，且容易因磁盘权限或 GD 库缺失失败。更稳的方式是预生成：
- 用命令行批量转：
find /www/wwwroot/your-site -name "*.jpg" -exec cwebp {} -q 80 -o {}.webp \;（需提前装cwebp） - 转完记得修正文件名：把
pic.jpg.webp改成pic.jpg对应的pic.webp，否则try_files找不到 - GD 库不支持 WebP 编码（只支持解码），所以 PHP
imagejpeg()无法输出 WebP，动态图得换imagick或前端处理
Chrome 正常但 Safari 白屏？检查 MIME 类型
Safari 对 WebP 支持较晚（iOS 14+/macOS 11.0+），且若 Nginx 未正确声明类型，会拒绝渲染。错误现象是图片区域空白，Console 报 The resource <url> was blocked due to MIME type mismatch</url>。
- 确认 Nginx 已加载
mime.types，且里面包含image/webp webp;行 - 如果用的是精简版系统（如某些 Docker 镜像），可能缺失该行，需手动补上
- 用
curl -I https://yoursite.com/test.jpg检查响应头是否含Content-Type: image/webp，没有就说明后端没走 WebP 分支
真正卡住人的地方往往不是配置多难，而是 Nginx 不报错、不提示，只默默返回原图——得靠 curl -H "Accept: image/webp" 对比两次请求才能确认是否真生效。
