在 imgix，我们非常关心用户体验和页面性能。之前，我们讨论了 。本质上，它会延迟屏幕外图像的加载，直到访问者滚动并且图像进入视口。它允许在任何给定时间加载更少的图像，并加快每个图像的加载时间。 延迟加载及其对 Core Web Vitals 的好处 但是，如果设置不当，延迟加载可能会增加页面布局的不稳定性，导致更糟糕的 Cumulative Layout Shift 指标，这是三个 Core Web Vitals 之一。 为了提高页面速度同时最小化 Cumulative Layout Shift，最好的解决方案是将延迟加载与 结合起来。 BlurHash 在本文中，我们将讨论什么是 BlurHash 以及如何使用 imgix 将其应用于您的图像。 什么是图像占位符和 BlurHash？ 当连接或站点加载图像缓慢时，占位符是改善感知加载时间并提供更好用户体验的绝佳选择。 BlurHash 是一种算法，可让您创建图像占位符的紧凑版本。 该算法创建一串字符，对图像的模糊表示进行编码，字符数由图像质量决定。该字符串足够短，您可以直接在页面标记中提供它，然后可以将该字符串解码为模糊图像，而无需获取和下载图像文件。   BlurHash 的一个主要优点是您可以将大型图像文件转换为更少量的数据，以便在原始文件仍在加载时显示图像的模糊表示。 Wolt 的一位工程师 ，同时试图找到一个更好的解决方案来解决图像在较慢的互联网连接上的加载方式。 想出了 BlurHash 的想法 如何使用 BlurHash 功能 要创建模糊图像，只需将 添加到任何图像以获取 BlurHash 字符串。获得 BlurHash 字符串后，就可以在 组件中使用它。  组件负责将哈希解码为可以显示的图像。 fm=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 帐户 也发布 在这里。

Sign Up for Free

Get A Demo

Read the Docs

Visit Website

該音頻是用故事的原始語言製作的！

太長; 讀書

Boost your HackerNoon story @ $159.99! 🚀

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

About Author

註釋

標籤

这篇文章刊登在

Related Stories

从论坛到信息流：社交媒体算法如何塑造数字互动

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

架构师指南：构建 AI/ML 数据湖参考架构

使用这 18 种开发工具来提高你的工作效率 🚀🔥

从论坛到信息流：社交媒体算法如何塑造数字互动

HackerNoon Decoded: The Top 10 Countries Where HackerNoon Is the Most Active

架构师指南：构建 AI/ML 数据湖参考架构

使用这 18 种开发工具来提高你的工作效率 🚀🔥

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps