menu Thinking Null
安装WebP-server,自适应输出WebP图片
2021-02-06   typecho维护   暂无评论   1835 次阅读

[TOC]

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

AVIF优于WebP

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

相比JPEG(一种古代图片格式),AVIFWebP都不支持逐行图像解码(必须等待全部下载完成后才能显示),但是,AVIF相当小的文件大小有助于减轻对逐行解码的需求。
相比AVIFWebP平均体积更大。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.

图片路径网站路径
/www/wwwroot/awsl.blog/usr/uploads/2020/12/1589424388.pnghttps://awsl.blog/usr/uploads/2020/12/1589424388.png

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

IMG_PATH
/www/wwwroot/awsl.blog

EXHAUST_PATHwebp 图像的缓存文件夹, 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 输出,其中的部分路径配置有误,不能运行。

本篇文章采用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 许可协议进行许可。

转载或引用本文时请遵守许可协议,注明出处。

发表评论
暂无评论
textsms
account_circle
email
link