让站点图片加载速度更快——引入 WebP Server 无缝转换图片为 WebP

2020-02-24

为了知道我们的 Web 站点性能如何，我们一般会使用 Google 的 PageSpeed Insights ，其中，我们可能经常看到如下提示：

同时，你的打分也会被下降了，如何解决这种问题呢？

Image formats

我们知道，图片一般有不同的格式，比如我们常见的 JPG，PNG 就分别属于两种不同的图片格式，通过是否对图片进行压缩，我们可以分为：

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

除了是否压缩以外，还有一个大家可能经常会遇到的问题——图片是否有透明图层，例如在之前的「搭建 Cloudflare 背后的 IPv6 AnyCast 网络」中的图片，在嵌入我的文章时并不会因为背景颜色的变化而显示出一个白色的背景，这是因为图片存在「透明通道（阿尔法通道）」，常见的支持透明通道的图片格式有：PNG，PSD，JPEG XR 和 JPEG 2000，其中后两者也是 Google 推荐的图片的 next-gen formats 之二，而常见的无透明通道的则是：JPEG 啦。

除了这个之外，还有一个由 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 图片非常简单，只需要下载 Google 提供的 cwebp 工具，并且使用：

cwebp -q 70 picture_with_alpha.png -o picture_with_alpha.webp

就可以进行转换了，转换出来的 webp 图片比原图会小不少，但是这个是单张图片，我们的目的是让站点的图片可以无痛地以 WebP 格式输出，如果我们的博客上有 100+ 张图片转换该如何操作呢？如果是更多呢？

聪明的人可以想到——我们可以写一个脚本来自动转换，或者使用一些服务器插件，比如 mod_pagespeed （可以参考之前的文章：使用 Nginx 和 mod_pagespeed 自动将图片转换为 WebP 并输出），但是这些操作都有其特定的局限性，以 mod_pagespeed 为例，假设你能流畅完成编译/安装/配置，它的转换需要以图片和站点内容在一个目录下为前提，并通过修改 URL 的方式进行转换，举例来说，你的图片地址为：

<img src="picture_with_alpha.png">

那么经过转换后的图片可能为：

<img src="picture_with_alpha.png.pagespeed.ic.uilK6vtMij.webp">

这样可以做到图片和转换后的图片分离的效果，但是这种转换我个人博客上便无法完成，为了方便配置和防止被绑死在一个博客平台上，我的博客图片被统一地放在了 / 地址上，这样 mod_pagespeed 便无法发挥作用了。

Polish

在 Cloudflare 中，Pro 用户可以使用到一个功能——Polish，功能描述如下：

Improve image load time by optimizing images hosted on your domain. Optionally, the WebP image codec can be used with supported clients for additional performance benefits.

如果选择了 Serve WebP Image 的话，通过 Cloudflare 的图片请求会被无缝地转换为 WebP 格式输出，同时请求头部中，会多一个名为 cf-polished 的 Header，用来 debug 转换情况。有兴趣的读者可以看一下 Cloudflare 的博文「Using Cloudflare Polish to compress images」来了解更多相关信息。

Cloudflare 的这个功能很赞，由于这个转换需要算力，所以 Polish 只提供给 Pro 用户使用，为了同样使用到类似的功能，我用 NodeJS 写了一个服务器，命名为 WebP Server，之后和 Benny 用 Golang 重写了一遍，命名为 WebP Server Go。

WebP Server Go

由于 WebP Server 和 WebP Server Go 功能类似，且由于主要在发展后者，这里直接介绍 Go 版 WebP Server 啦。

WebP Server Go 的使用方式非常简单，由于使用 Go 编写，使用者只需要下载单一文件——webp_server，创建一个 config.json 文件，内容大致如下：

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

然后 webp_server --config /path/to/config.json 即可运行 WebP Server，最后加上 Nginx 的反向代理就可以用了。

举个例子，有一张图片是 https://image.nova.moe/tsuki/tsuki.jpg，对应的图片在服务器上的存放目录为 /var/www/nova-image/tsuki/tsuki.jpg 的话，那么，配置文件中的 IMG_PATH 就是 /var/www/nova-image，同时，每次转换导出的 webp 图片会被缓存到 webp_server 同目录的 exhaust/tsuki/tsuki.webp 下，供后续访问的时候直接输出使用。

最重要的一点是——我们访问的 URL 可以完全不用改变，访客访问的依然是 https://image.nova.moe/tsuki/tsuki.jpg ，但是得到的图片格式为：image/webp，而且体积减少了不少。

而且，对于 Safari 用户来说，WebP Server 会选择直接输出原图，防止出现输出的 webp 图片不能显示的情况。

Effect

那么这个 WebP Server 效果如何呢？以一篇包含了不少图片的文章「那些年我开过的车（们）」为例：

Before WebP Server

在默认原图输出的时候，PageSpeed 得分为

对应的图片请求为：

After WebP Server

使用了 WebP Server 之后：

看上去很赞是不是~

Afterword

写作本文时，正好是乔布斯的生日，想到之前看到的一段话。

我们很多人都想回馈社会，在这股洪流中再添上一笔。这是用我们的专长来表达的唯一方式——因为我们不会写鲍勃·迪伦的歌或汤姆·斯托帕德的戏剧。我们试图用我们仅有的天分去表达我们深层的感受，去表达我们对前人所有贡献的感激，去为这股洪流加上一点儿什么。那就是推动我的力量。
——《史蒂夫·乔布斯传》

这世界上轮子太多，在各种开发工具的加持下造出一个没有解决任何痛点的粗糙轮子也越发简单，而专注于解决特定需求的工具只有少量沉淀，在这个 PNG/JPG 和 WebP 共存的历史背景下，希望 WebP Server Go 成为起到一个平稳过渡的工具，目前代码已经开源在 GitHub：n0vad3v/webp_server_go，由于初学 Go 没多久，代码上可能还有不少欠缺考虑的地方，还望未来的使用者海涵。

Happy Hacking!