宝塔面板网站实现WebP自动分发需服务器层按需转换：一、重编译Nginx启用image_filter与libwebp；二、配置Nginx location匹配图片路径并基于Accept头协商；三、可选OpenResty+Lua精细化控制；四、或用Cloudflare Workers边缘转换；五、Apache环境则用mod_rewrite+mod_image_magic配合.htaccess与PHP回退。
如果您在宝塔面板中托管的网站需要为现代浏览器自动提供 WebP 格式图片以提升加载性能，但原始图片仍保留为 JPEG 或 PNG，需通过服务器层实现按需转换与内容协商分发。以下是实现该功能的具体操作步骤：
一、启用 Nginx 的 image_filter 模块并编译支持 WebP
Nginx 原生 image_filter 模块不支持 WebP 输出，必须重新编译 Nginx 并启用 --with-http_image_filter_module 与 libwebp 支持。此步骤确保服务器具备实时图像格式转换能力。
1、登录服务器终端，执行 bt 16 进入宝塔编译管理界面。
2、选择当前运行的 Nginx 版本（如 1.22.1），点击【编译安装】，在编译参数框末尾追加：--with-http_image_filter_module --with-libwebp。
3、确认编译开始，等待完成并自动重启 Nginx。编译失败时需先执行 yum install -y libwebp-devel（CentOS）或 apt install -y libwebp-dev（Ubuntu/Debian）。
二、配置站点 Nginx 配置文件启用 WebP 动态转换
通过 location 匹配图片请求路径，结合 image_filter 指令对 JPEG/PNG 请求进行尺寸调整与 WebP 编码，同时依据 Accept 请求头判断是否分发 WebP。
1、在宝塔面板中进入目标站点 → 【配置文件】，定位到 server 块内，在 location ~ .*\.(jpg|jpeg|png)$ { … } 区域前插入以下配置：
2、添加条件判断逻辑：map $http_accept $webp_suffix { default ""; "~*webp" ".webp"; }。
3、在 server 块内新增 location 块：location ~* ^/images/.+\.(jpg|jpeg|png)$ { add_header Vary Accept; try_files $uri$webp_suffix $uri =404; }。
4、创建 WebP 转换专用 location：location ~* ^/webp/(.+)\.(jpg|jpeg|png)$ { alias /www/wwwroot/your-site/$1.$2; image_filter resize 1920 -; image_filter_webp on; }（需同步在网站根目录下建立 webp 子目录并赋予 www 权限）。
三、使用 ngx_http_image_filter_module + Lua 实现智能协商转换
当需更精细控制（如仅对 >50KB 的 JPG 自动转 WebP、跳过小图），可借助 OpenResty 内置 Lua 模块编写条件逻辑，绕过静态文件匹配限制。
1、安装 OpenResty 替代原 Nginx：执行 wget https://openresty.org/download/openresty-1.21.4.2.tar.gz && tar -xzf openresty-1.21.4.2.tar.gz，编译时加入 --with-http_image_filter_module --with-libwebp。
2、在站点配置中引入 Lua 处理块：location ~* \.(jpg|jpeg|png)$ { content_by_lua_block { local accept = ngx.var.http_accept if accept and string.find(accept, "webp") then ngx.exec("/webp_process", ngx.var.uri) end } }。
3、定义 /webp_process 内部 location，调用 image_filter_webp on 并设置 image_filter_jpeg_quality 85。
四、部署 Nginx + Cloudflare Workers 边缘转换方案
若无法修改服务器 Nginx 编译选项，可利用 Cloudflare 免费 Workers 将原始图片 URL 重写为 WebP 可识别路径，并由 Cloudflare 自动执行格式协商与缓存分发。
1、在 Cloudflare DNS 中确保站点已代理（橙色云朵状态）。
2、进入 Workers → 创建服务，粘贴以下代码：addEventListener('fetch', event => { event.respondWith(handleRequest(event.request)) }); async function handleRequest(request) { const url = new URL(request.url); if (url.pathname.match(/\.(jpe?g|png)$/i) && request.headers.get('Accept')?.includes('webp')) { url.pathname = url.pathname.replace(/\.(jpe?g|png)$/i, '.webp'); } return fetch(url, request); }。
3、绑定 Worker 至站点根域，并在宝塔面板中关闭该站点的“强制 HTTPS”重定向（避免与 Workers 重定向冲突）。
五、配置 Apache 环境下的 mod_rewrite + mod_image_magic 替代方案
若站点使用 Apache（通过宝塔切换），需启用 mod_image_magic 模块并配合 .htaccess 实现基于 Accept 头的 WebP 重写，无需重新编译。
1、在宝塔面板中进入【软件商店】→ 找到 Apache → 【设置】→ 【配置修改】，在
2、在站点根目录放置 .htaccess，写入：RewriteCond %{HTTP_ACCEPT} image/webp RewriteRule ^(.*).(jpe?g|png)$ $1.webp [T=image/webp,E=WEBP:1]。
3、创建 PHP 回退脚本 webp.php，当 .webp 文件不存在时调用 GD 库生成并输出：if (!file_exists($_SERVER['DOCUMENT_ROOT'] . $_SERVER['REQUEST_URI'])) { header('Content-Type: image/webp'); imagepalettetotruecolor($im); imagewebp($im); exit; }。
