让网站支持 webp 图片输出,提高网站性能!

让网站支持 webp 图片输出,提高网站性能!

Scroll Down

1.网站性能测试

今天使用了PageSpeed Insights进行了网页性能测试,又包含电脑端和手机端,结果如下:
手机端:
image

电脑端:
image-1653134267375

在查看优化结果,都会提到使用采用新一代格式提供图片:

image-1653134325323

这个图片的格式问题也是,影响网站性能的主要原因之一,因此也是想找到解决办法,当然,下面也给出了建议:“WebP 和 AVIF 等图片格式的压缩效果通常优于 PNG 或 JPEG,因而下载速度更快,消耗的数据流量更少。

在相关的网站也找到了,相应的解释:

2.为什么以 AVIF 或 WebP 格式提供图像?

AVIF 和 WebP 是图像格式,与较旧的 JPEG 和 PNG 对应物相比,它们具有出色的压缩和质量特征。以这些格式而不是 JPEG 或 PNG 对图像进行编码意味着它们将加载更快并消耗更少的蜂窝数据。

AVIF 在 Chrome、Firefox 和 Opera 中受支持,并且与具有相同质量设置的其他格式相比,文件大小更小。有关AVIF的更多信息,请参阅提供 AVIF 图像代码实验室。

最新版本的 Chrome、Firefox、Safari、Edge 和 Opera 支持 WebP,并为 Web 上的图像提供更好的有损和无损压缩。

因此,我也找到了想的解决办法:使用WebP来实现图片的无损和有损压缩。

3.什么是webP

首先,我们知道图片的各种格式,比如:jpg、png、bmp等格式,还有就是图片的压缩。

  • 无压缩。不对图片数据进行压缩处理,能准确地呈现原图片。 BMP 格式就是其中之一。
  • 无损压缩。压缩算法对图片的所有的数据进行编码压缩,能在保证图片的质量的同时降低图片的尺寸。 png 是其中的代表。
  • 有损压缩。压缩算法不会对图片所有的数据进行编码压缩,而是在压缩的时候,去除了人眼无法识别的图片细节。因此有损压缩可以在同等图片质量的情况下大幅降低图片的尺寸。 其中的代表是 jpg。

webP的官方介绍:
这是一个基于 Golang 的服务器,它允许您即时提供 WebP 图像。jpg,jpeg,png它会默认转换文件,这可以通过编辑config.json…

目前支持的图片格式:JPEG、PNG、BMP、GIF(暂时为静态图片)
例如,当您访问时https://a.com/1.jpg,它会在image/webp不改变 URL 的情况下使用。

什么是 WebP?
WebP 是一种现代图像格式,可为 Web 上的图像提供卓越的无损和有损压缩。使用 WebP,网站管理员和 Web 开发人员可以创建更小、更丰富的图像,从而使 Web 更快。

为什么选择 WEBP
与 PNG 相比,WebP 无损图像的大小要小 26%。在同等 SSIM 质量指数下,WebP 有损图像比可比较的 JPEG 图像小 25-34%。

image-1653135203486

上面已经说了那么多,就直接开始了!

4.部署 webp_server_go

4.1、适用说明

我的网站的版本是:CentOS Linux release 7.8.2003 (Core),那么本教程也只能使用CentOS Linux release 7。

image-1653136099929

4.2、搭建运行环境

在centos下需要首先安装libaom-devel -y

yum install libaom-devel -y

否则会一直提示:“error while loading shared libraries: libaom.so.3

Ubuntu用户:

apt install libaom-dev -y
ln -s /usr/lib/x86_64-linux-gnu/libaom.so /usr/lib/x86_64-linux-gnu/libaom.so.3

4.3、下载 webp server go

先创建安装文件夹

mkdir /opt/webps

cd /opt/webps

image-1653136424563

下载webp_server_go,最新版本是WebP Server Go 0.4.4。下载地址:《WebP Server Go》

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

image-1653136619974

4.4、部署webp server go

给予执行权限:

chmod +x webp-server

创建config.json

vim config.json

添加内容

{
        "HOST": "127.0.0.1",
        "PORT": "3333",
        "QUALITY": "80",
        "IMG_PATH": "/root/.halo",
        "EXHAUST_PATH": "/root/.halo/cache",
        "ALLOWED_TYPES": ["jpg","png","jpeg","bmp"],
        "ENABLE_AVIF": false
}

参数解释:

HOST:一般不修改。
PORT:webp_server_go 的运行端口。
QUALITY:转换质量,默认为 80%。
IMG_PATH:固定格式,/运行 Halo 的用户名/.halo
EXHAUST_PATH:固定格式,/运行 Halo 的用户名/.halo/cache
ALLOWED_TYPES:需要转换的格式
ENABLE_AVIF:禁止AVIF
默认情况下禁用 AVIF 支持,因为将图像转换为 AVIF 会消耗 CPU。

image-1653137361796

我的网站使用HALO搭建的,因此路径需要你自己根据实际情况配置。

4.5、创建webp server go服务

使用 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

image-1653137675792

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

然后执行:

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

image-1653139074424

4.6、使用 Nginx 进行代理

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

修改 halo.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';
}

重载 Nginx 配置:

检查配置文件是否有问题

nginx -t 

nginx -s reload

5.验证

5.1、打开页面

打开页面后,发现图片已经变成webp格式!图片的清晰度,基本也没啥变化!YYDS!

image-1653140119168

参考资料:
1.《PageSpeed Insights地址》
2.《Serve images in modern formats》
3.《WebP Server Document》
4.《让站点图片加载速度更快——引入 WebP Server 无缝转换图片为 WebP》
5.《优雅的让 Halo 支持 webp 图片输出》
6.《 webp server go》