WebP 图片格式的存在,让我们在 WebP 上展示的图片体积可以有较大幅度的缩小,也就带来了加载性能的提升

使用 webp-sh 组织最新开源的 webp_server_go,它的大概原理就是:当我们请求一张图片的时候使用 web 代理工具转发到 webp_server_go 应用进行处理,处理完成之后返回 webp 格式的图片,并且会保留处理后的图片以供后面的访问。

目前大部分主流浏览器都已经支持了 webp 图片的显示,除了 Safari,但是不必担心,webp_server_go 会自动判断请求来源是否为 Safari,如果是,那么会返回原图。

部署 webp_server_go

仓库 的 README 中已经大致讲解了部署方法。

创建目录

新建一个存放二进制文件和 config.json 文件的目录(可自定义):

mkdir /opt/webps
cd /opt/webps

下载二进制文件

wget https://github.com/webp-sh/webp_server_go/releases/download/0.1.3/webp-server-linux-amd64 -O webp-server

给予执行权限:

chmod +x webp-server

创建配置文件 config.json

{
    "HOST": "127.0.0.1",
    "PORT": "3333",
    "QUALITY": "80",
    "IMG_PATH": "/www/wwwroot/lvtao/upload",
    "EXHAUST_PATH": "/www/wwwroot/lvtao/cache/webp",
    "ALLOWED_TYPES": ["jpg","png","jpeg"]
}

参数解释:

  • HOST:一般不修改。
  • PORT:webp_server_go 的运行端口。
  • QUALITY:转换质量,默认为 80%。
  • IMG_PATH:固定格式,你的源图片目录
  • EXHAUST_PATH:固定格式,WEBP输出的缓存目录
  • ALLOWED_TYPES:需要转换的格式

使用 systemd 进行状态管理

创建 service 文件:

vim /etc/systemd/system/webps.service

写入:

[Unit]
Description=WebP Server
Documentation=https://github.com/n0vad3v/webp_server_go
After=nginx.target

[Service]
Type=simple
StandardError=journal
AmbientCapabilities=CAP_NET_BIND_SERVICE
WorkingDirectory=/opt/webps
ExecStart=/opt/webps/webp-server --config /opt/webps/config.json
ExecReload=/bin/kill -HUP $MAINPID
Restart=always
RestartSec=3s


[Install]
WantedBy=multi-user.target

需要注意的是,ExecStart 命令中的程序路径和配置文件路径一定要正确,结合你的实际情况填写。

然后执行:

systemctl daemon-reload
systemctl enable webps.service
systemctl start webps.service

查看运行状态:

systemctl status webps.service

使用 Nginx 进行代理

在 server 节点添加:

location ^~ /upload/ {
        proxy_pass http://127.0.0.1:3333;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_hide_header X-Powered-By;
        proxy_set_header HOST $http_host;
        add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';
}

重载 Nginx 配置:

检查配置文件是否有问题

nginx -t 

nginx -s reload

chrome中检查是否已经生效

image.png