可通过配置WebP自动转换实现按需响应:一、启用Nginx WebP支持模块并声明MIME类型;二、配置站点重写规则,按Accept头返回.webp或原图;三、用ImageMagick等插件批量生成静态WebP文件;四、可选编译支持WebP的定制Nginx。

如果您在宝塔面板中部署的网站需要为访问者提供更小体积、更高画质的图片资源,但原始上传的仍是JPEG或PNG格式,可通过配置WebP自动转换实现按需响应。以下是实现此功能的具体步骤:
一、启用Nginx的WebP支持模块
Nginx需编译或加载ngx_http_image_filter_module及额外WebP解码能力,宝塔默认未开启WebP识别与响应协商。需手动确认模块存在并启用WebP MIME类型声明。
1、登录宝塔面板,进入【软件商店】→ 找到已安装的Nginx → 点击【设置】→【配置修改】。
2、在http块内(即server块之外、大括号包围的全局区域)查找是否存在types段,若无则添加以下内容:
types { image/webp webp; }
3、在http块末尾追加以下map指令,用于根据Accept请求头判断客户端是否支持WebP:
map $http_accept $webp_suffix { "~*webp" ".webp"; }
二、配置站点的WebP重写规则
该步骤通过location匹配图片路径,并结合try_files尝试返回同名.webp文件;若.webp不存在,则回退原图,确保兼容性。
1、在宝塔面板中,进入【网站】→ 找到目标站点 → 点击【设置】→【配置文件】。
2、在server块内、location ~ .*\.(jpg|jpeg|png|gif)$ { ... } 区域前插入以下配置:
location ~ .*\.(jpg|jpeg|png|gif)$ { add_header Vary Accept; try_files $uri$webp_suffix $uri =404; }
3、保存配置文件后,点击【重载配置】使Nginx生效。
三、使用宝塔插件生成WebP静态文件
依赖运行时动态转换可能增加CPU负载,推荐预先批量生成WebP副本并存放于相同路径,提升响应速度与稳定性。
1、在宝塔【软件商店】中搜索并安装【ImageMagick】或【GraphicsMagick】插件(任选其一)。
2、进入【终端】,切换至网站根目录,执行批量转换命令(以ImageMagick为例):
find ./ -type f \( -iname "*.jpg" -o -iname "*.jpeg" -o -iname "*.png" \) -exec convert {} -quality 85 {}.webp \;
3、执行完成后,将所有生成的*.webp文件重命名去除重复后缀(如xxx.jpg.webp → xxx.jpg.webp),可使用sed或rename命令批量处理:
rename 's/\.jpg\.webp$/.webp/; s/\.jpeg\.webp$/.webp/; s/\.png\.webp$/.webp/' *.webp
四、启用Nginx第三方WebP模块(可选高级方案)
使用openresty或编译nginx_with_webp模块可实现无损条件转发与自动压缩,无需预生成文件,适合动态图床类站点。
1、备份当前Nginx配置,卸载宝塔内置Nginx,通过【编译安装】方式部署含webp支持的定制版Nginx。
2、在编译参数中加入--add-module=/path/to/nginx-webp-module。
3、配置中启用webp_filter on; 并设定webp_filter_quality 82; 等指令控制输出质量。
注意:此操作将替换宝塔托管的Nginx服务,可能导致面板部分功能异常,须谨慎操作并保留快照。










