BlurHash

BlurHash是图像占位符的一种紧凑表示形式。

为什么你需要它？

当你加载设计师精心设计的页面时，是否因为所有图像尚未加载而出现一堆空白框而让设计师伤心？当你想通过将小缩略图塞进数据中作为占位符来解决这个问题时，是否让数据库工程师伤心？

BlurHash将解决你的问题！怎么解决？就像这样：

你还可以在blurha.sh上看到很好的例子并亲自尝试！

它是如何工作的？

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

总结如下：

想了解所有技术细节？请阅读算法描述。

实际上，实现这个算法非常简单！实现代码简短，容易移植到你喜欢的语言或平台。

实现

到目前为止，我们已经创建了以下实现：

C - 可移植C代码的编码器实现。
Swift - 编码器和解码器实现，以及提供高级功能的更大库。还有一个示例应用程序可以用来试验该算法。
Kotlin - 适用于Android的解码器实现。
TypeScript - 编码器和解码器实现，以及用于测试的示例页面。
Python - C编码器代码集成到Python中。

这些涵盖了我们的使用场景，但可能需要改进、扩展和完善。还有一些我们知道的第三方实现：

[列出了各种语言的第三方实现，包括Python、Go、PHP、Java、Clojure、Nim、Rust、Ruby、Crystal、Elm、Dart、.NET、JavaScript、Haskell、Scala、Elixir、ReScript、Xojo、React Native、Zig、Titanium SDK、BQN、Jetpack Compose、C++、Kotlin Multiplatform和OCaml]

找不到你需要的语言？试试GitHub搜索。例如，这里是名称中包含"blurhash"的仓库搜索结果。

也许你想帮助扩展这个列表？这就引出了...

贡献

我们非常欢迎贡献！该算法非常简单 - 不到两百行代码 - 可以轻松移植到你选择的平台。支持更多平台将会很棒！所以，Java解码器？Golang编码器？Haskell？Rust？我们都想要！

我们也会尝试在我们的问题跟踪器上标记我们希望得到帮助的任何问题，所以如果你只想浅尝辄止，去看看吧。

你可以向我们提交拉取请求，或者如果你想自己运行所有内容，你可以启动自己的仓库和项目，我们不介意。

如果你想为这个项目做出贡献，我们有一个行为准则。

用户

谁在使用BlurHash？以下是我们所知道的一些项目：

Wolt - 我们当然自己在使用它。BlurHash在iOS和Android的移动客户端以及网页上被用作图像加载时的占位符。
Mastodon - Mastodon去中心化社交媒体网络使用BlurHash作为加载占位符，以及隐藏标记为敏感的媒体内容。
Signal - Signal私密通讯使用Blurhash作为聊天对话中照片和视频消息下载前的占位符。
Jellyfin - Jellyfin自由软件媒体系统使用Blurhash作为电影和电视节目图片下载时的占位符。

常见问题

编码和解码的速度如何？

这些实现并未进行很多优化。在非常大的图像上运行可能会有点慢。对于相同的输入或输出大小，编码器和解码器的性能大致相同，所以在UI线程上解码非常大的占位符也可能会有点慢。

然而！高效使用该算法的诀窍是不要在全尺寸数据上运行它。图像的细节都被丢弃了，所以在运行BlurHash之前应该先缩小图像。如果你正在创建缩略图，就在缩略图上运行BlurHash，而不是在完整图像上运行。

同样，在显示占位符时，非常小的图像在放大时效果很好。我们通常解码宽度为32甚至20像素的占位符，然后让UI层将它们放大，这与以全尺寸解码它们是无法区分的。

我该如何选择X和Y组件的数量？

这在一定程度上取决于个人喜好。你选择的组件越多，占位符中保留的信息就越多，但BlurHash字符串就会越长。此外，组件过多时可能看起来不太好。我们通常选择4x3，这似乎达到了很好的平衡。

然而，你应该根据图像的宽高比来调整组件数量。例如，非常宽的图像应该有更多的X组件和更少的Y组件。

Swift示例项目包含一个测试应用，你可以在其中尝试不同的参数并查看结果。

在一些实现中的"punch"参数是什么？

它是一个调整解码图像对比度的参数。1表示正常，较小的值会使效果更微妙，较大的值会使效果更强烈。这基本上是一个设计参数，让你可以调整外观。

从技术上讲，它的作用是放大或缩小AC分量。

这只能用作图像加载占位符吗？

嗯，这最初是为此设计的，但事实证明它对其他一些事情也很有用：

无需使用昂贵的模糊处理就可以遮罩图像 - Mastodon将其用于此目的。
数据表示使得提取图像不同区域的颜色平均值变得相当容易。你可以轻松找到图像顶边或角落的近似平均颜色。Swift BlurHashKit实现中有一些代码可以用来试验这一点。此外，整个图像的平均颜色就是DC分量，甚至不需要实现任何更复杂的DCT就可以解码。
我们一直打算尝试通过使用BlurHash并扩展边界来为UI元素实现带色调的阴影。不过到目前为止还没有时间实际实现这个功能。