使用 BlurHash 图像占位符增强网站的用户体验

在 imgix，我们非常关心用户体验和页面性能。之前，我们讨论了延迟加载及其对 Core Web Vitals 的好处。本质上，它会延迟屏幕外图像的加载，直到访问者滚动并且图像进入视口。它允许在任何给定时间加载更少的图像，并加快每个图像的加载时间。

但是，如果设置不当，延迟加载可能会增加页面布局的不稳定性，导致更糟糕的 Cumulative Layout Shift 指标，这是三个 Core Web Vitals 之一。

为了提高页面速度同时最小化 Cumulative Layout Shift，最好的解决方案是将延迟加载与BlurHash结合起来。

在本文中，我们将讨论什么是 BlurHash 以及如何使用imgix 将其应用于您的图像。

什么是图像占位符和 BlurHash？

当连接或站点加载图像缓慢时，占位符是改善感知加载时间并提供更好用户体验的绝佳选择。 BlurHash 是一种算法，可让您创建图像占位符的紧凑版本。

该算法创建一串字符，对图像的模糊表示进行编码，字符数由图像质量决定。该字符串足够短，您可以直接在页面标记中提供它，然后可以将该字符串解码为模糊图像，而无需获取和下载图像文件。

BlurHash 的一个主要优点是您可以将大型图像文件转换为更少量的数据，以便在原始文件仍在加载时显示图像的模糊表示。 Wolt 的一位工程师想出了 BlurHash 的想法，同时试图找到一个更好的解决方案来解决图像在较慢的互联网连接上的加载方式。

如何使用 BlurHash 功能

要创建模糊图像，只需将fm=blurhash添加到任何图像以获取 BlurHash 字符串。获得 BlurHash 字符串后，就可以在BlurHash组件中使用它。 BlurHash组件负责将哈希解码为可以显示的图像。

在此特定示例中，React BlurHash组件在最终标记中生成一个画布元素。注意：生成的标记可能会略有不同，具体取决于使用的库或框架解码器。

 import './App.css'; import Imgix from "react-imgix"; import { Blurhash } from "react-blurhash"; function App() { return ( <div className="App"> <section className="App-header"> <Blurhash hash="eCF6B#-:0JInxr?@s;nmIoWUIko1%NocRk.8xbIUaxR*^+s;RiWAWU" width={600} height={400} /> <Imgix src="https://assets.imgix.net/example-images/puffins.jpg" width={600} height={400} /> </section> </div> ); } export default App;

将 BlurHash 代码应用到图像后，生成的占位符将如下所示：

在构建时将 BlurHash 字符串包含在您的标记中，以确保用户立即看到图像的模糊版本。

要开始使用，请立即创建一个免费的 imgix 帐户！