切换网站图片格式到webp
关于webp
Image formats
我们知道,图片一般有不同的格式,比如我们常见的JPG
,PNG
就分别属于两种不同的图片格式,通过是否对图片进行压缩,我们可以分为:
- 无压缩:不对图片数据进行压缩处理,能准确地呈现原图片,
BMP
格式就是其中之一。 - 无损压缩:压缩算法对图片的所有的数据进行编码压缩,能在保证图片的质量的同时降低图片的尺寸,
png
是其中的代表。 - 有损压缩:压缩算法不会对图片所有的数据进行编码压缩,而是在压缩的时候,去除了人眼无法识别的图片细节,因此有损压缩可以在同等图片质量的情况下大幅降低图片的尺寸,其中的代表是
jpg
。
除了这些之外,还有一个由Google牵头研发,Telegram Stickers主力使用的文件格式:WebP
WebP格式
WebP
的有损压缩算法是基于VP8
视频格式的帧内编码[17],并以RIFF
作为容器格式。[2] 因此,它是一个具有八位色彩深度和以1:2
的比例进行色度子采样的亮度-色度模型(YCbCr 4:2:0
)的基于块的转换方案。[18] 不含内容的情况下,RIFF
容器要求只需20字节的开销,依然能保存额外的元数据(metadata
)。[2]WebP
图像的边长限制为16383像素。
在 WebP
的官网中,我们可以发现Google
是这样宣传WebP
的:
WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.
简单来说,WebP
图片格式的存在,让我们在WebP
上展示的图片体积可以有较大幅度的缩小,也就带来了加载性能的提升。
webp_server_go
原理
那么如何在不替换图片地址的情况下,将图片转为
webp
格式然后输出呢这时候就可以使用
webp-sh
组织最新开源的webp_server_go
工具了
工作原理:
当我们请求一张图片的时候使用
web
代理工具转发到webp_server_go
应用进行处理,处理完成之后返回webp
格式的图片,并且会保留处理后的图片以供后面的访问目前大部分主流浏览器都已经支持了
webp
图片的显示,除了Safari
,但是不必担心,webp_server_go
会自动判断请求来源是否为Safari
,如果是,那么会返回原图下面将提供两种
web
服务器的代理方法注意:此教程以
CentOS 7.x
为例,其他发行版本大同小异,另外,此教程只针对于Halo
,其他web程序可能在config.json
部分有所不同,建议参考仓库的README
部署webp_server_go
仓库的
README
中有部署方法,这里针对Halo
博客平台详细说明一下
- 下载官方编译好的
webp_server_go
二进制文件
新建一个存放二进制文件和
config.json
文件的目录
mkdir /opt/webps
cd /opt/webps
下载二进制文件
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
vim config.json
config.json
:
{
"HOST": "127.0.0.1",
"PORT": "3333",
"QUALITY": "80",
"MAX_JOB_COUNT": "10",
"IMG_PATH": "/root/.halo",
"EXHAUST_PATH": "/root/.halo/cache",
"ALLOWED_TYPES": ["jpg", "png", "jpeg", "bmp"]
}
- HOST:一般不修改
- PORT:
webp_server_go
的运行端口- QUALITY:转换质量,默认为
80%
- MAX_JOB_COUNT:同一时间最大的转换数,超过会排队
- IMG_PATH:固定格式,/
运行 Halo 的用户名
/.halo
- EXHAUST_PATH:固定格式,/
运行 Halo 的用户名
/.halo
/cache
- ALLOWED_TYPES:需要转换的格式
- 使用
systemd
进行状态管理
创建
service
文件
vim /etc/systemd/system/webps.service
写入配置
注意:
ExecStart
命令中的程序路径和配置文件路径一定要正确,结合你的实际情况填写
[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
然后执行
systemctl daemon-reload
systemctl enable webps.service
systemctl start webps.service
查看运行状态
systemctl status webps.service
如果没有问题,那么会输出以下日志
WebP Server is running at 127.0.0.1:3333
使用Nginx进行代理
如果你的
Halo
是使用Nginx
反向代理的话
- 修改
halo.conf
或自己的nginx.conf
文件
在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';
}
^~
表示匹配任何以/images/
开头的地址,匹配符合以后,停止往下搜索正则,采用这一条
- 重载
Nginx
配置
# 检查配置文件是否有问题
nginx -t
# 重启nginx
nginx -s reload
使用Caddy进行代理
如果你的
Halo
是使用Caddy
反向代理的话
- 修改
Caddyfile
在你域名节点下添加:
proxy /upload/ localhost:3333 {
transparent
}
- 重启
Caddy
service caddy restart
验证是否生效
注意看类型(Type)列,图片的返回格式已经变为
webp
,而且图片大小已经远远降低,此时说明你的配置已经成功了
重启、停止和关闭服务
如果后续不想使用
webp_server_go
了,先停止并关闭webps.service
,然后恢复以前的Nginx
或Caddy
配置文件并重启即可
# 查看 webps.server 状态
systemctl status webps.service
# 重启 webps.service
systemctl restart webps.service
# 停止 webps.service
systemctl stop webps.service
# 关闭 webps.service
systemctl disable webps.service
写在后面
👍优点
接入简单,可以在不替换原图资源的情况下进行转换
对大图片或图片量比较大的网站来说,可以显著提高首屏加载速度,优化网站性能指标
针对不支持的平台,有回退方案
另外,
webp-sh
还有其他语言的版本:地址链接
评论区