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啊)
实际操作
那么如何在不替换图片地址的情况下,将图片转为 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
验证是否生效
看 Type 列,图片的返回格式已经变成了 webp,而且图片大小已经远远降低,就说明你成功了。
Webp-Server-Go不仅仅能运用在Chevereto图床上,慢慢挖掘它的潜力吧
链接:
对比
原图 jpg 833kb
webp 486kb 转换质量:90%
图片出处(要翻墙):https://www.pixiv.net/artworks/70150501
Q.E.D.