宝塔面板中图片未自动分发WebP格式,需依次启用Nginx image_filter模块、配置WebP条件响应头、添加MIME类型、可选启用brotli压缩,并通过浏览器开发者工具验证Content-Type与Vary响应头。

如果您在宝塔面板中托管网站,但访问时图片未自动以WebP格式分发,可能是由于服务器未启用WebP支持或未配置正确的MIME类型与响应头。以下是实现WebP格式图片压缩分发的具体操作步骤:
一、确认Nginx是否支持WebP并启用image_filter模块
Nginx需编译时包含http_image_filter_module,该模块用于动态转换图片格式;若使用宝塔默认Nginx版本(1.20+),通常已内置此模块,但需手动启用配置。检查并激活模块后,才能对请求图片进行实时WebP重写。
1、登录宝塔面板,进入【软件商店】→ 找到当前运行的Nginx → 点击【设置】→ 【配置修改】。
2、在http块内(即server块外)查找是否存在load_module行,若无,则添加:
load_module modules/ngx_http_image_filter_module.so;
3、保存配置,返回Nginx设置页点击【重载配置】,确保不报错。
二、为指定站点启用WebP条件响应头
通过判断客户端Accept头是否包含image/webp,决定是否返回WebP格式图片;此方式无需更改源文件,依赖Nginx的map指令与add_header实现内容协商。
1、进入【网站】→ 找到目标站点 → 点击【设置】→ 【配置文件】。
2、在server块内、location ~ .*\.(gif|jpg|jpeg|png|bmp|webp)$ { 上方插入以下map块:
map $http_accept $webp_suffix {
default "";
"~*webp" ".webp";
}
3、在同一个server块中,找到对应图片的location块(如location ~ .*\.(gif|jpg|jpeg|png|bmp|webp)$),将其中的try_files行替换为:
try_files $uri$webp_suffix $uri =404;
4、在该location块内添加:
add_header Vary Accept;
5、保存配置,点击【重载Nginx】。
三、部署WebP格式图片静态文件并配置MIME类型
若采用预生成WebP文件方式(如用cwebp批量转换),需确保Nginx能正确识别.webp后缀并返回对应MIME类型,否则浏览器可能拒绝渲染或下载错误。
1、进入【网站】→ 目标站点 → 【设置】→ 【配置文件】。
2、在server块内(或http块内)查找types { ... }区块,在其中添加:
image/webp webp;
3、将原始图片(如example.jpg)与同名WebP文件(example.jpg.webp)置于同一目录,或统一使用.webp后缀命名(如example.webp)。
4、确保文件权限为644,且WebP文件由cwebp等工具生成,符合标准编码规范。
四、使用Nginx第三方模块ngx_brotli配合WebP实现双重压缩优化
ngx_brotli可对WebP文件进一步压缩传输体积,提升加载速度;需单独编译安装模块,并与WebP响应逻辑协同工作。
1、通过SSH登录服务器,执行:
cd /www/server/panel/install && bash install_soft.sh 0 install brotli 1
2、安装完成后,在站点配置文件的http块中添加:
brotli on;
brotli_comp_level 6;
brotli_types image/webp application/javascript text/css text/xml text/plain;
3、确认站点配置中WebP响应路径已启用(参考第二步),且.brotli预压缩文件未被误启用(保持brotli_static off)。
4、保存并重载Nginx配置。
五、验证WebP分发是否生效
通过真实浏览器请求与响应头比对,确认服务端是否按Accept头返回WebP资源及正确Vary策略,排除CDN或本地缓存干扰。
1、在Chrome中打开开发者工具(F12),切换到Network标签,刷新网页。
2、点击任一图片资源,在Headers选项卡中查看Request Headers → Accept字段是否含image/webp。
3、查看Response Headers → Content-Type是否为image/webp,Vary是否包含Accept。
4、右键图片 → “在新标签页中打开图像”,地址栏URL末尾应显示.webp后缀或响应头明确标识WebP编码。










