宝塔面板WebP压缩设置教程

本文详细讲解了如何在宝塔面板中配置Nginx以实现WebP图片的智能压缩与自动分发，涵盖启用image_filter模块、设置基于Accept头的内容协商、补充WebP MIME类型、可选集成Brotli双重压缩，以及通过浏览器开发者工具精准验证效果；无论你是想提升网站加载速度、优化SEO评分，还是降低带宽成本，这套开箱即用的配置方案都能帮你轻松让现代浏览器优先获取更小更清晰的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学习网公众号了解相关技术文章。