WEBP格式是什么？

WebP的有损压缩算法是基于VP8视频格式的帧内编码，并以RIFF作为容器格式。因此，它是一个具有八位色彩深度和以1:2的比例进行色度子采样的亮度-色度模型（YCbCr4:2:0）的基于块的转换方案。不含内容的情况下，RIFF容器要求只需20字节的开销，依然能保存额外的元数据(metadata)。WebP图像的边长限制为16383像素。

WEBP格式的优势

根据Google较早的测试，WebP的无损压缩比网络上找到的PNG档少了45%的文件大小，即使这些PNG档在使用pngcrush和PNGOUT处理过，WebP还是可以减少28%的文件大小。

重点(敲黑板)：无损压缩依旧可以减少约28%的大小（NP啊）

v2-f5c2ff5dec4510c3d77b6037e844baa3_720w

v2-7bc47c24a028f8738f373375d67d75bb_r

实际操作

那么如何在不替换图片地址的情况下，将图片转为 webp 格式然后输出呢？

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

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

部署 webp_server_go

github项目地址 https://github.com/webp-sh/webp_server_go ，其他语言版本访问 https://github.com/webp-sh

新建一个存放二进制文件和 config.json 文件的目录（可自定义）：

mkdir /root/webps
 
cd /root/webps

下载二进制文件（最新版本请访问 releases）：

wget https://github.com/webp-sh/webp_server_go/releases/download/0.3.2/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/image.lwguang.com/",
	"EXHAUST_PATH": "/www/wwwroot/image.lwguang.com/cache",
	"ALLOWED_TYPES": ["jpg","png","jpeg"]
}

参数说明：

  • HOST：一般不修改。
  • PORT：webp_server_go 的运行端口。
  • QUALITY：转换质量，默认为 80%。
  • IMG_PATH：改成你图床的目录
  • EXHAUST_PATH：改成你图床的目录/cache
  • 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=/root/webps
ExecStart=/root/webps/webp-server --config /root/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

如果没有问题，那么会输出以下日志：

Webp-Server-Go is Running on http://127.0.0.1:3333

使用 Nginx 进行代理

如果你的 Chevereto 是使用 Nginx 反向代理的话。

修改 Chevereto 的 nginx 配置文件
在 Chevereto 下的 server 节点添加：

    location ~ /images/.*\.(jpg|jpeg|png)$  {
        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

验证是否生效

QQ截图20210317180911
看 Type 列，图片的返回格式已经变成了 webp，而且图片大小已经远远降低，就说明你成功了。

Webp-Server-Go不仅仅能运用在Chevereto图床上，慢慢挖掘它的潜力吧

链接：

对比

原图 jpg 833kb
STARDUST---812 (1)

webp 486kb 转换质量：90%
STARDUST

图片出处（要翻墙）：https://www.pixiv.net/artworks/70150501

Q.E.D.