宝塔面板WebP压缩设置教程

本文详细讲解了如何在宝塔面板中手动配置Nginx以实现WebP图片的智能分发与压缩优化，涵盖启用image_filter模块、设置基于Accept头的内容协商、补充WebP MIME类型、可选集成Brotli双重压缩等关键步骤，并提供完整的验证方法，帮助网站管理员显著提升图片加载速度与用户体验，尤其适合追求高性能和SEO优化的WordPress、静态站等各类Web项目快速落地WebP支持。

如果您在宝塔面板中托管网站，但访问时图片未自动以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编码。

理论要掌握，实操不能落！以上关于《宝塔面板WebP压缩设置教程》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！