预览体验更好一点！WebP Cloud 支持带 Blurhash 的 Metadata 请求

在之前的文章「还在为了不同分辨率的设备手动生成小图？WebP Cloud Services 上线 Adaptive Resize 功能」中我们提到了新上线的功能——Adaptive Resize，可以在 Dashboard 上配置之后由 WebP Cloud 识别访客设备并自动输出不同尺寸的图片（例如，给手机输出一个最大宽度为 900px 的图片）来加快加载速度，减少设备的流量消耗。

但即使是更小的图片依然有加载速度的问题（这是物理极限），且由于 WebP 类型的图片不支持 Baseline Loading 和 Progressive Loading（JPG 反而是支持的，也就是我们看某些图😍片🤪较🤩多😇的网站的时候发现某些 JPG 图片是从上到下慢慢加载完成（Baseline Loading）而不是从空白直接突然出现）的特性，所以这里依然有优化的空间。

如果总结一下上述的问题的话便是如下：

1. 我们需要在图片加载完成之前给用户获得更好的体验（模糊的缩略图，减少初始加载字节数）
2. 我们需要在图片加载之前保持页面结构（例如Skeleton 骨架屏，防止 CLS(Cumulative Layout Shift)）

为了进一步优化这两个问题，我们给 WebP Cloud 增加了一个新的能力——Metadata，可以通过在图片后面加入 ?meta=full 获得原图的一些信息，我们以如下图片为例：

图片来源为：「一文读不懂的 Go 1.21 GA 的 PGO 优化——一次在 WebP Server Go 上的尝试」

这张图片的原图为： https://blog.webp.se/go-121-pgo/base.png ，是一张大小为 46KB 的 PNG 图片，这张图片在我们博客上展示时使用的地址为： https://p2k7zwb.webp.ee/go-121-pgo/base.png ，变成了一张大小为 38KB 的 AVIF 图片。

此时将 ?meta=full 拼接在 URL 后面，访问 https://p2k7zwb.webp.ee/go-121-pgo/base.png?meta=full 就可以得到一个 JSON 信息的返回：

{
  "width": 640,
  "height": 480,
  "format": "png",
  "size": 46056,
  "num_pages": 1,
  "colorspace": "sRGB",
  "blurhash": "LwRn[?%ztlx]uPrqVsV[%xaLRma|"
}

信息中的 width, height 可以帮助应用程序提前得知图片的尺寸信息并正确布局，num_pages 可以告知这个图片有多少帧（GIF 图的 num_pages 大于 1），而 blurhash ，则可以帮助应用程序快速构建一个模糊的缩略图。

Blurhash

网址为： https://blurha.sh/

In short, BlurHash takes an image, and gives you a short string (only 20-30 characters!) that represents the placeholder for this image. You do this on the backend of your service, and store the string along with the image. When you send data to your client, you send both the URL to the image, and the BlurHash string. Your client then takes the string, and decodes it into an image that it shows while the real image is loading over the network. The string is short enough that it comfortably fits into whatever data format you use. For instance, it can easily be added as a field in a JSON object.

简而言之，BlurHash 将图像转换为一个短字符串（只有 20-30 个字符！），这个字符串代表该图像的占位符。你在服务的后台执行此操作，并将字符串与图像一起存储。当你向客户端发送数据时，你会发送图像的 URL 和 BlurHash 字符串。客户端接收字符串后，将其解码为一张图像，在真实图像通过网络加载时显示。这个字符串足够短，可以轻松适应你使用的任何数据格式。例如，它可以轻松地作为一个字段添加到 JSON 对象中。

Blurhash 由于算法简单，有许多开源实现，当应用程序通过 ?meta=full 拿到了 Blurhash 之后便可以快速在前端展示一个模糊的缩略图，例如上文例子中的 LwRn[?%ztlx]uPrqVsV[%xaLRma| ，Blurhash 预览效果如下：

来源是 https://blurha.sh ，网站提供了一个填入 Blurhash 生成预览图的地方

有了带有 Blurhash 的 Metadata 接口后，相信你可以进一步让你的应用利用好 WebP Cloud 的平台特性给你的访客获得更好的预览体验了~