网站图片加载慢？用这个神器WebPServerGo让图片秒变轻盈，流量直接省一半！-晨泽博客

网站图片太多，加载慢得要命，一张大图动不动几百K甚至几M。换WebP格式能大幅缩减体积，同等画质下比JPG/PNG小25%-34%。这篇文章介绍怎么用WebP Server Go这个工具自动转换图片格式，不改前端代码，访问原图URL自动返回优化后的WebP/AVIF。

为什么说WebP能大幅缩减图片体积

WebP是谷歌2010年推出的图片格式，相比传统JPG/PNG/GIF有几个明显优势：

同等画质下体积小25%-34%，4MB的图片能压到129KB
支持透明背景（替代PNG），体积更小
支持动画（替代GIF），色彩更好，体积小60%-80%
主流浏览器Chrome、Edge、Safari全部支持，覆盖率90%以上
支持渐进式加载，图片先模糊后清晰

懒人福音！0代码搞定图片自动优化 WebP Server Go

光知道格式还不够，怎么把现有图片批量转成WebP？手动转换太麻烦。推荐WebP Server Go，这是个用Go语言开发的高性能转换工具。它干的事很简单：你访问原图URL，它自动返回优化后的WebP/AVIF格式，前端代码完全不用改。

图片只是展示区别，实际使用中你会发现，两图几乎没区别，但格式和大小变了

工具开源地址：https://github.com/webp-sh/webp_server_go

当你访问https://你的域名/pics/tsuki.jpg时，它会以image/webp/image/avif格式输出，URL不变。

输入兼容JPEG/PNG/SVG等，输出WebP/AVIF，体积能减小30%-50%
访问原图URL自动返回优化格式，前端代码零修改
推荐Docker部署，给个docker-compose配置就能跑
压缩质量、输出格式、缓存策略都能自定义
处理结果会缓存，不用重复转换，Go写的，扛并发没问题

宝塔面板部署，3步搞定

第一步：安装Docker并拉取镜像

打开宝塔面板→侧边栏找到「Docker」→安装Docker（如果还没装的话）

在在线镜像中搜索webpsh/webps，描述为https://github.com/webp-sh/webp_server_go的镜像，点击拉取。后面docker-compose里的镜像名webpsh/webp-server-go是同一个东西，只是写法不同

无法拉取怎么办？点我获取备份文件

通过网盘分享的文件：webp.tar
链接: https://pan.baidu.com/s/1XvdC2qpjiTBHls97UqtmGg?pwd=mg6x 提取码: mg6x

在本地镜像，导入下载的文件即可

第二步：配置docker-compose参数（关键！）

来到任务编排

添加容器编排，填入docker-compose配置（下面两个标签页是完整配置，改好参数再点确定）

docker-compose文件内容(先改参数再点确定)

对于图片目录的描述

图像路径	/www/wwwroot/wxsnote.cn/wp-content/uploads/tsuki.jpg
网站路径	https://wxsnote.cn/wp-content/uploads/tsuki.jpg

服务器与网站url对比

volumes（数据储存卷）：

/opt/pics对应网站实际存图片的路径（比如/www/wwwroot/wxsnote.cn/wp-content/uploads/）
/opt/exhaust是转换后图片的缓存目录
/opt/metadata是缓存图片的元数据目录

ports（端口）：前面是内网端口可自定义（别和已有服务冲突），后面是容器端口不能改

deploy（内存限制）：根据服务器内存分配，1024M就是1GB

点确定就直接使用镜像构建并启动容器了，所以一定要先改参数

现在容器应该运行在127.0.0.1:3333上，访问http://127.0.0.1:3333/path/tsuki.jpg就能看到对应图片的优化版本。接下来配置Nginx反向代理让外网也能访问

第三步：Nginx反向代理配置，让优化后的图片「公开可见」

进入站点设置→伪静态→添加以下规则（原本的不用删除，直接在原本的伪静态下粘贴，如果有的话）：

全局

WP版

location ~* .(jpg|jpeg|png|gif)$ { # 此处可修改生效路径
    expires 30d;
    # WebP Server Go 的 READ_BUFFER_SIZE 默认仅 4096 字节，若浏览器 Cookie 过大
    # 会导致请求头超限返回431。以下两行解决此问题：
    proxy_set_header Cookie "";            # 图片请求不需要 Cookie，清空以减小请求头体积
    proxy_set_header Accept-Encoding "";   # 清空，让 WebP Server 自行判断编码，避免双层压缩

    # 基础代理头
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Real-Port $remote_port;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;

    # 增大代理缓冲区，兜底大请求头
    # 若上游 WebP Server 的 READ_BUFFER_SIZE 较小，Nginx 端增大缓冲区可在一定程度上缓解
    # 最好同步调大 WebP Server 容器的 WEBP_READ_BUFFER_SIZE 环境变量（建议 32768）
    proxy_buffer_size 32k;
    proxy_buffers 4 64k;
    proxy_busy_buffers_size 64k;

    # 超时与协议
    proxy_connect_timeout 60s;
    proxy_send_timeout 600s;
    proxy_read_timeout 600s;
    proxy_http_version 1.1;

    proxy_pass http://127.0.0.1:3333$request_uri;
}

location ~* ^/wp-content/uploads/(.*.(jpg|jpeg|png|gif))$ {
    # 缓存30天
    expires 30d;
    # 去掉 URL 中的 /wp-content/uploads 前缀，只转发后面的路径
    rewrite ^/wp-content/uploads/(.*)$ /$1 break;
    proxy_pass http://127.0.0.1:3333;
    proxy_http_version 1.1;
    # 只保留必要头，去掉 Cookie 等大体积头
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Real-Port $remote_port;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header REMOTE-HOST $remote_addr;
    # 显式清空 Cookie，图片请求不需要
    proxy_set_header Cookie "";
    # Accept-Encoding 由 WebP Server 自行处理
    proxy_set_header Accept-Encoding "";
    proxy_connect_timeout 60s;
    proxy_send_timeout 600s;
    proxy_read_timeout 600s;
}

保存后，访问原图链接（比如https://你的域名/图片.jpg），会自动返回WebP格式，右键查看图片属性就能看到效果

进阶配置：让WebP Server更好用

前面教程用环境变量配了几个基础参数，其实WebP Server Go的配置方式有两种：config.json文件和环境变量，二选一就行。环境变量优先级更高，也就是说两边都设了同一个参数的话，环境变量会覆盖config.json里的值。

方式一：config.json（参数多的时候更清晰）

把下面这个JSON保存为config.json，改里面的路径参数就行。注意下面的值是我推荐的配置，不是默认值，不想开AVIF就把CONVERT_TYPES改成["webp"]，不需要缓存上限就把MAX_CACHE_SIZE改成0：

{
    "HOST": "0.0.0.0",
    "PORT": "3333",
    "QUALITY": "80",
    "IMG_PATH": "/opt/pics",
    "EXHAUST_PATH": "/opt/exhaust",
    "ALLOWED_TYPES": ["jpg","png","jpeg","bmp","gif","svg","heic","nef","webp"],
    "CONVERT_TYPES": ["webp","avif"],
    "STRIP_METADATA": true,
    "ENABLE_EXTRA_PARAMS": false,
    "EXTRA_PARAMS_CROP_INTERESTING": "InterestingAttention",
    "READ_BUFFER_SIZE": 32768,
    "CONCURRENCY": 262144,
    "DISABLE_KEEPALIVE": false,
    "CACHE_TTL": 259200,
    "MAX_CACHE_SIZE": 100
}

IMG_PATH和EXHAUST_PATH要用容器内的路径，别写宿主机的。因为volumes已经把宿主机目录映射到/opt/pics和/opt/exhaust了。

然后在docker-compose里通过volumes把config.json挂载进去。容器内镜像自带了一份默认config.json在/etc/config.json，挂载你自己的会覆盖它：

services:
  webp:
    image: webpsh/webp-server-go:latest
    restart: always
    volumes:
      - ./config.json:/etc/config.json:ro
      - /www/wwwroot/网站目录/wp-content/uploads/:/opt/pics
      - /www/wwwroot/imgwebp:/opt/exhaust
      - /www/wwwroot/imgwebp_metadata:/opt/metadata
    ports:
      - 127.0.0.1:3333:3333
    deploy:
      resources:
        limits:
          memory: 1024M

注意加了:ro表示只读，防止容器修改你的配置文件。因为环境变量优先级高，如果你在environment里也设了同名参数，config.json那个值就不生效了，所以二选一，别混用。

方式二：环境变量（简单直接）

前面教程已经用这种方式了，直接在docker-compose的environment里写。config.json和环境变量两种方式对下面这些参数都一样，列出常用的：

参数	环境变量	默认值	说明
QUALITY	WEBP_QUALITY	80	压缩质量，0到100，100是无损转换。默认80已经够用了，追求更小体积可以调低到70
CONVERT_TYPES	WEBP_CONVERT_TYPES	webp	输出格式，默认只转WebP。想启用AVIF就改成webp,avif。还有个jxl选项，不过浏览器支持率还低，暂时别用
STRIP_METADATA	WEBP_STRIP_METADATA	true	默认开，会删掉图片EXIF信息（拍摄设备、GPS坐标等），能再省点体积。如果图片需要保留拍摄参数，改成false
ENABLE_EXTRA_PARAMS	WEBP_ENABLE_EXTRA_PARAMS	false	开启后可以通过URL参数动态裁剪图片，做响应式图片很方便，下面会细说
CONCURRENCY	WEBP_CONCURRENCY	262144	最大并发连接数，默认值够大，一般不用改
MAX_CACHE_SIZE	WEBP_MAX_CACHE_SIZE	0	缓存目录大小上限，单位MiB。默认0不清理。设100就是每个缓存目录（exhaust、metadata、remote-raw）上限100MiB，后台每分钟检测一次，超出就清理旧文件

Extra Parameters动态裁剪

开启方式和其他参数一样，环境变量加 WEBP_ENABLE_EXTRA_PARAMS=true 或 config.json 里设 "ENABLE_EXTRA_PARAMS": true。开启后，可以在图片URL后面加参数实时调整尺寸：

?width=200：宽度缩到200px，高度等比缩放
?height=300：高度缩到300px
?width=400&height=400：裁剪为400×400，默认用attention crop（找图片中最吸引注意力的区域裁剪）
?max_width=800&max_height=600：限制最大尺寸，小图不受影响，大图按比例缩

这个功能做响应式图片很方便，一张原图能按需输出不同尺寸。不过要注意，开了这个功能后Nginx里要允许URL参数通过，前面给的配置已经没问题了。如果想限制只允许图片参数，可以在Nginx location里加：

# 只允许width/height/max_width/max_height参数
if ($args !~* "^(width|max_width|height|max_height)(=+)?(&((width|max_width|height|max_height)(=+)?))*$") {
    set $args "";
}