切换网站图片格式到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还有其他语言的版本：地址链接

目录CONTENT

切换网站图片格式到webp

切换网站图片格式到webp

关于webp

Image formats

WebP格式

webp_server_go

原理

部署webp_server_go

使用Nginx进行代理

使用Caddy进行代理

验证是否生效

重启、停止和关闭服务

写在后面

👍优点

👋参考

评论区