WebP Cloud Services 目前已支持 AVIF

Jul 8, 2023 · Nova Kwok

我们先来聊聊 WebP Cloud Services 最近一个月的新方向——WebP Cloud 是做什么的

类似我们的开源组件 WebP Server Go 的 SaaS 版本，用户只需要用 GitHub 登录，然后填写源站地址，即可获得一个新的带 WebP 转换的，带 CDN 和缓存的新地址，比如 100KB 的图片 https://blog.webp.se/hetzner-arm64/c1-board.png 地址变成 WebP 版本的只有 60KB 的 https://p2k7zwb.webp.ee/hetzner-arm64/c1-board.png 地址（且画质几乎不会衰减）。


`https://blog.webp.se/hetzner-arm64/c1-board.jpg`	`https://p2k7zwb.webp.ee/hetzner-arm64/c1-board.jpg`
107.81 KB	64.52 KB

此外，你还可以通过传入 ?width= 参数来直接生成缩略图


`https://blog.webp.se/hetzner-arm64/c1-board.jpg`	`https://p2k7zwb.webp.ee/hetzner-arm64/c1-board.jpg?width=200`
107.81 KB	7.27 KB

在上图中我们可以看到，使用我们给出的地址，例如 https://p2k7zwb.webp.ee/hetzner-arm64/c1-board.jpg 可以让渲染的图片体积大幅缩小，同时几乎不产生可见的画质的衰减，这一切都得益于我们将图片转换成了 WebP 格式，也就是 WebP Cloud Services 名字的由来。

WebP 图片格式是由 Google 提出来的，其官方网站 https://developers.google.com/speed/webp 对它的介绍是：

WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.
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.

在 iOS 14 开始原生支持了 WebP 之后，主流浏览器都已经支持了这个格式：

在我们的开源组件 WebP Server Go 的 Benchmark https://docs.webp.sh/benchmark/ 中，在 80% 的画质的情况下，我们观测到新的 WebP 格式的图片大小可以缩小到原图的 40%，非常优秀。

由于考虑到不是每个人都想自己部署 WebP Server Go 这个组件，且尤其是对于一些使用静态网站框架（比如 Hugo，Hexo）的用户来说，他们可能根本就没有服务器在运行，所以我们推出了 SaaS 版本，称为 WebP Cloud，实现方便的接入。

从上面的例子来看，这个服务也可以有效减少图片体积，加速网站的访问。甚至，我们支持动态的WebP，也就是说可以将 GIF 转化为 WebP。

AVIF 格式的介绍可以在 https://web.dev/learn/images/avif/ 看到，官方对此的说明是：

As with WebP, AVIF aims to address every conceivable use case for raster images on the web: GIF-like animation, PNG-like transparency, and improved perceptual quality at file sizes smaller than JPEG or WebP.

从上面的说明我们可以知道 AVIF 可以有机会做到比 WebP 更好的压缩率（图片体积更小），且从 https://caniuse.com/avif 中我们可以看到，主流浏览器已经支持了 AVIF ：

WebP Server Go 项目在 0.4.0 版本（https://github.com/webp-sh/webp_server_go/releases/tag/0.4.0）开始支持了 AVIF 转换。不过由于 AVIF 转换非常慢且会消耗大量的资源，所以在 WebP Server Go 的配置文件中有一个 ENABLE_AVIF 选项来决定是否输出 AVIF 格式图片，默认是关闭的。

在 WebP Cloud 项目上，同样考虑到如果支持 AVIF 格式的图片会给我们的系统资源带来巨大的冲击，我们最初默认只支持 WebP 格式的转换。但是作为一个尊重用户、倾听用户想法的服务商，我们会倾听来自用户的需求，比如在我们发布到 V2EX 的帖子中 https://www.v2ex.com/t/953132#reply4 ，用户有如下反馈：

棒！希望加入 AVIF 相当于白白获得了 CDN 服务商的 WebP 功能。

那我们便一定要开始支持 AVIF 了！

WebP Cloud 怎么支持 AVIF

由于上文中提到的为了支持 AVIF 格式的图片会给我们的系统资源带来巨大的冲击，所以我们必须得想一个对系统冲击不大，但是同时也能支持 AVIF 的格式的方法。

在目前我们对于 WebP 支持的情况下，一个请求的生命周期大概是如下（以 WebP Cloud Services Blog 为例）：

对于第一个请求，比如 https://p2k7zwb.webp.ee/gravatar-services/wp-gravatar.png ，WebP Cloud 的缓存中没有对应的文件，所以这个时候需要「回源」去 https://blog.webp.se/gravatar-services/wp-gravatar.png 下载「原图」
下载得到原图的同时进行 WebP 转换，并保存转换后的图片，如果 WebP 版本的图片体积更小，就返回 WebP 格式给请求者，否则就返回原图
后续所有到 https://p2k7zwb.webp.ee/gravatar-services/wp-gravatar.png 路径的请求都会从缓存输出，不会有「回源」的动作，此时源站没有任何的流量或带宽压力

WebP 的图片转换很快，对系统资源开销也不大，而 AVIF 则相反。为了避免同步的返回转换后的 AVIF 图片，我们采取了一种异步的处理模式，大致逻辑如下：

在 WebP 转换的步骤中「同时进行 WebP 转换，并保存转换后的图片，并返回给请求者」之后，会有一个后台任务异步将图片转换为 AVIF 格式，且转换过程完全串行（即在一个瞬间只会有一个转换正在进行）
所有转换完成的 AVIF 格式图片会被保存到一个单独的路径下，在后续的请求中，我们会判断浏览器是否支持 AVIF 格式，如果支持且 AVIF 格式的图片比 WebP 格式的体积要小，那我们就会输出 AVIF 格式图片

怎么知道浏览器支持情况

我们从 https://caniuse.com/avif 可以知道哪些浏览器的哪些版本对于某个特定图片格式是支持的，但是我们显然不能直接对所有的 UA 来进行匹配，所以要判断一个浏览器是否支持某个格式我们是这样判断的：

通过浏览器的 Accept 头来判断一个正常的浏览器是否支持某些格式，例如在 Linux 的 Chrome 上请求 Accept 中可能是如下：
- Accept：text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
- UA 是： Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36
- 这种情况下我们从 Accept 中就可以直接知道浏览器同时支持了 AVIF 和 WebP，这个时候哦我们只需要选择体积更小的输出即可
对于 iOS 上的浏览器来说，情况就稍微棘手一点，比如 iOS 16 上的 Chrome 发出的请求头如下：
- Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
- UA 是：Mozilla/5.0 (iPhone; CPU iPhone OS 16_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/114.0.5735.124 Mobile/15E148 Safari/604.1
- 可以看出在 Accept 头中完全没法知道浏览器支持哪些格式，这种时候我们就只能从 UA 中做文章，通过 caniuse.com 的介绍来判断用户的浏览器版本

对应代码类似如下：

func GuessSupportedFormat(header *fasthttp.RequestHeader) []string {
	var (
		supported = map[string]bool{
			"raw":  true,
			"webp": false,
			"avif": false,
		}

		ua     = string(header.Peek("user-agent"))
		accept = strings.ToLower(string(header.Peek("accept")))
	)

	if strings.Contains(accept, "image/webp") {
		supported["webp"] = true
	}
	if strings.Contains(accept, "image/avif") {
		supported["avif"] = true
	}

	// chrome on iOS will not send valid image accept header
	if strings.Contains(ua, "iPhone OS 14") || strings.Contains(ua, "CPU OS 14") ||
		strings.Contains(ua, "iPhone OS 15") || strings.Contains(ua, "CPU OS 15") ||
		strings.Contains(ua, "iPhone OS 16") || strings.Contains(ua, "CPU OS 16") ||
		strings.Contains(ua, "iPhone OS 17") || strings.Contains(ua, "CPU OS 17") ||
		strings.Contains(ua, "Android") || strings.Contains(ua, "Linux") {
		supported["webp"] = true
	}

	// iOS 16 supports AVIF
	if strings.Contains(ua, "iPhone OS 16") || strings.Contains(ua, "CPU OS 16") ||
		strings.Contains(ua, "iPhone OS 17") || strings.Contains(ua, "CPU OS 17") {
		supported["avif"] = true
	}

	// save true value's key to slice
	var accepted []string
	for k, v := range supported {
		if v {
			accepted = append(accepted, k)
		}
	}
	return accepted
}

我们开始支持 AVIF 了！

在 2023-07-03 13:05 UTC 开始，我们上线了 AVIF 相关的代码。届时，我们的所有用户都已经自动启用了这个功能，例如，我们可以在用户 https://strrl.dev/post/weekly-report/2022/45-devjoy/ 的网站上发现：

部分请求由于 AVIF 格式的文件更小，已经自动输出了 AVIF 格式图片，而部分图片 WebP 格式更小，所以输出了 WebP 格式。

上文中我们说到「AVIF 转换过程完全串行（即在一个瞬间只会有一个转换正在进行）」为了让大家可以对于 AVIF 转换资源开销有个更加直观的感受，这里我们分享一段在上线了新的代码之后，对于存量图片进行 AVIF 转换时我们其中一台服务器的负载情况：

从图片中可以看出，在日常接受/处理请求的时候服务器的负载比较低，大概 CPU 使用率在 10% 以内，但是一旦开始转换 AVIF 图片后，哪怕是串行转换，也会将 CPU 拉满一段时间。

WebP Cloud Services 团队是一个来自上海和赫尔辛堡的三人小团队。由于我们不融资，且没有盈利压力，所以我们会坚持做我们认为正确的事情，力求在我们的资源和能力允许范围内尽量把事情做到最好，同时也会在不影响对外提供的服务的情况下整更多的活，并在我们产品上实践各种新奇的东西。

我们相信所有的功能都应该对所有用户开放，所以这一次的 AVIF 功能实现在代码完成测试上线之后也已经对所有用户开放，用户不需要做任何操作即可感受到图片体积的进一步减小和网站加载速度的进一步提升。

哦对了，我们最近还优化了 Dashboard https://dashboard.webp.se/ ，由于我们尊重用户并将用户的控制权放在第一位，目前 Dashboard 上可以看到非常详细的 Proxy 的统计信息和完整的请求路径

而不像 Cloudflare 给 Free 用户的只有一个简单的统计图，Pro 版本才会给出甚至是经过 Sample 之后的带路径的统计信息。

如果你觉得这个服务有意思，欢迎登录 WebP Cloud Dashboard 来体验，如果你好奇它还有哪些神奇的功能，可以来看看我们的文档 WebP Cloud Services Docs，希望大家玩的开心~

参考资料

WebP Cloud Services 团队是一个来自上海和赫尔辛堡的三人小团队，由于我们不融资，且没有盈利压力，所以我们会坚持做我们认为正确的事情，力求在我们的资源和能力允许范围内尽量把事情做到最好，同时也会在不影响对外提供的服务的情况下整更多的活，并在我们产品上实践各种新奇的东西。

如果你觉得我们的这个服务有意思或者对我们服务感兴趣，欢迎登录 WebP Cloud Dashboard 来体验，如果你好奇它还有哪些神奇的功能，可以来看看我们的文档 WebP Cloud Services Docs，希望大家玩的开心~

Discuss on Hacker News