零成本加速博客！WebP Server Go自动化图片优化指南

一、前言

在当今追求极致用户体验的网络时代，图片加载速度往往决定着访客的留存率。研究表明，网页加载时间每延迟1秒，转化率就会下降7%。而对于内容创作者来说，博客中的高清图片既是吸引读者的利器，却也常常成为拖慢网站速度的"元凶"。

传统解决方案往往让人望而却步：手动转换图片格式耗时费力，商业CDN服务又需要持续付费。但今天，我们将打破这一困局——通过

https://github.com/webp-sh/webp_server_go

这款开源工具，您可以在零成本的前提下，实现：

🚀 全自动将PNG/JPG等实时转换为WebP格式
💾 图片体积平均减少70%以上
⚡ 访问速度提升50%-80%

二、前置条件

首先介绍下我博客的部署方式，我的博客是部署在家里的一台服务器上的。服务器上部署了Docker环境，在Docker中部署了三个应用：

Ngins：用于反向代理，将 www.niuyeye.top 反向代理到各个应用上。
Halo：用于博客建站，IP端口为：http://192.168.11.1:8090。
Web Server Go：用于图片自动转换压缩，IP端口为：http://192.168.11.1:3333。

在用户访问上下文/的时候，Nginx 会把请求反向代理至 Halo ，由 Halo 提供服务；由于 Halo 对前端提供图片的url都有/upload上下文，所以在用户访问/upload的时候我把请求反向代理至 Webp Server GO 提供转换后的图片。

所以你需要满足以下条件：

在博客部署的服务器上安装 Nginx 用于反向代理。
拥有一个域名，并将域名解析到 Nginx 服务。

三、安装 WebP Server Go

可参考官方文档：Use with Docker(Recommended) | WebP Server Documentation

创建docker-compose.yml 文件

# 进入docker应用文件夹
cd /mnt/sata1-4/DockerData/
# 创建webp server应用文件夹
mkdir webp-server-go
cd mkdir webp-server-go
# 创建并编辑docker-compose.yml
vi docker-compose.yml

docker-compose.yml文件如下：

services:
  webp:
    image: webpsh/webp-server-go
    # image: ghcr.io/webp-sh/webp_server_go
    restart: always
    volumes:
      - /mnt/sata1-4/DockerData/halo/halo2/attachments/upload:/opt/pics/upload   # 映射Halo存放图片文件夹
      - /mnt/sata1-4/DockerData/halo/halo2/attachments/thumbnails:/opt/pics/upload/thumbnails # 映射Halo存放略缩图文件夹
      - ./exhaust:/opt/exhaust
      - ./metadata:/opt/metadata
    ports:
      - 3333:3333
networks: {}

启动容器

输入docker compose up -d 命令启动容器。

四、修改 Nginx 配置

进入 nginx 安装目录，修改nginx.conf ，添加以下配置：

upstream halo {
    server 192.168.11.1:8090;
}
upstream webp {
    server 192.168.11.1:3333;
}
server {
    listen 80;
    listen [::]:80;
    server_name www.niuyeye.top;
    location ~ /.well-known/acme-challenge {
        proxy_set_header Host $host;
        proxy_set_header X-Real_IP $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr:$remote_port;
        proxy_pass http://127.0.0.1:9180;
    }
    location / {
        proxy_pass http://halo;
        proxy_set_header HOST $host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}
server {
    listen 443 ssl;
    listen [::]:443 ssl;
    server_name www.niuyeye.top;
    ssl_certificate /etc/nginx/ssl/*.niuyeye.top_niuyeye.top_P256/fullchain.cer;
    ssl_certificate_key /etc/nginx/ssl/*.niuyeye.top_niuyeye.top_P256/private.key;
    location ~ /.well-known/acme-challenge {
        proxy_set_header Host $host;
        proxy_set_header X-Real_IP $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr:$remote_port;
        proxy_pass http://127.0.0.1:9180;
    }
    location / {
        proxy_pass http://halo;
        proxy_set_header HOST $host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    location /upload {
        proxy_pass http://webp;
        proxy_set_header HOST $host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    # 过滤.webp和.svg走原来的路径
    location ~ ^/upload/.+\.(svg|webp)$ {
        proxy_pass http://halo;
        proxy_set_header HOST $host;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

重载 Nginx 配置

nginx -t 
nginx -s reload

至此，大功告成！

五、对比测试

让我们来测一测博客优化了多少吧！

优化前：

优化后：

其中最显著的就是 Logo 图片从1.3M大小压缩到了119kB，压缩率约为90.85%，加载时间也从7.83秒降低至1.13秒，由于我家里的服务器没有公网 IP，所以访问全靠内网穿透服务，带宽只有10Mbps，流量也有限制，压缩后极大的提升了的我博客的访问速度，也节省了很多的流量费用。