[TOC]

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

AVIF优于WebP

随着十年前的WebP图像格式成为标准，现在，出现了一种新的现代图像格式AVIF，它提供了更好的性能。

相比JPEG（一种古代图片格式），AVIF和WebP都不支持逐行图像解码(必须等待全部下载完成后才能显示)，但是，AVIF相当小的文件大小有助于减轻对逐行解码的需求。
相比AVIF，WebP平均体积更大。Ctrl Blog也指出，AVIF才是下一代web图片格式。

The image “AVIF and WebP vs JPEG”by © 2020 Daniel Aleksandersen is licensed under a CC BY-SA 4.0 License.

无论从哪个角度来看，WebP都不是最优选项。
然而，AVIF的编码非常慢，因此需要 强大的多核计算机、避免大图像、耐心，而这些我都没有。

cavif — PNG / JPEG到AVIF转换器

CAVIF 是一个 PNG / JPEG到AVIF转换器，经过测试，使用默认配置转换一张600kb的图片，花了1分钟，输出90kb的图片，肉眼看不出图片质量降低。只有目前最新的RTX30系显卡可以硬解AV1编码，而且支持AVIF的浏览器不到10%。所以，目前只有WebP做到了速度与文件大小、图片质量、兼容性的平衡。

WebP-server-go

WebP-server-go是基于Golang的服务器，可以即时提供WebP图像。

例如，当您访问 https://awsl.blog/logo.png 时，将输出image/webp ，但是URL不改变。
对于Safari和Opera用户，将使用原始图像。

简单的安装步骤

1. 下载或构建

https://github.com/webp-sh/webp_server_go/ 下载预编译的版本。

2. 生成并配置config.json

./webp-server -dump-config > config.json

默认的 config.json 像这样：

{
    "HOST": "127.0.0.1",
    "PORT": "3333",
    "QUALITY": "80",
    "IMG_PATH": "/path/to/pics",
    "EXHAUST_PATH": "/path/to/exhaust",
    "ALLOWED_TYPES": ["jpg","png","jpeg"]
}

为本站Typecho配置的config.json 像这样

{
    "HOST": "127.0.0.1",
    "PORT": "3333",
    "QUALITY": "85",
    "IMG_PATH": "/www/wwwroot/awsl.blog",
    "EXHAUST_PATH": "/www/wwwroot/awsl.blog/usr/webp_cache",
    "ALLOWED_TYPES": ["jpg","png","jpeg"]
}

配置示例

在下面的例子里, 图片路径和网站 URL.

它的 config.json 应该是这样的:

EXHAUST_PATH 是webp 图像的缓存文件夹, EXHAUST_PATH 设置成 /www/wwwroot/awsl.blog/usr/webp_cache
, 你的 webp 图像会保存在 /www/wwwroot/awsl.blog/usr/webp_cache/usr/uploads/2020/12/1589424388.png.1582558990.webp.

3. 运行！

下面注意有一些坑。config.json中指定的文件夹必须可以写入。最好用普通用户，比如www用户权限运行。

./webp-server --config=/path/to/config.json

4. 配置Nginx proxy_pass

改 Nginx 配置文件，在 server 段中添加：

location ~ /usr/webp_cache {deny all;}
location ~ .*\.(jpg|jpeg|png)$
        {
            proxy_pass http://127.0.0.1:3333;
        }

开机自动启动、进程守护

众所周知，Systemed是坏文明，能用Supervisord就不用Systemed。下面是Supervisord配置。

[program:webp-server]
command=/www/wwwroot/awsl.blog/webp-server -config /www/wwwroot/awsl.blog/config.json -jobs 1
directory=/www/wwwroot/awsl.blog/
autorestart=true
startsecs=3
startretries=3
stdout_logfile=/www/server/supervisor/log/webp-server.out.log
stderr_logfile=/www/server/supervisor/log/webp-server.err.log
stdout_logfile_maxbytes=2MB
stderr_logfile_maxbytes=2MB
user=www
priority=999
numprocs=1
process_name=%(program_name)s_%(process_num)02d

参考了 为 Typecho 适配自适应 WebP 输出，其中的部分路径配置有误，不能运行。