BlurHash 画像プレースホルダーを使用して Web サイトのユーザー エクスペリエンスを向上させる

imgix では、ユーザー エクスペリエンスとページ パフォーマンスを重視しています。以前は、 遅延読み込みと Core Web Vitals でのその利点について説明しました。基本的に、訪問者がスクロールして画像がビューポートに入るまで、画面外の画像の読み込みを遅らせます。これにより、一度に読み込む画像が少なくなり、各画像の読み込み時間が短縮されます。

ただし、適切に設定されていない場合、遅延読み込みによってページ レイアウトが不安定になり、Web の 3 つの主要要素の 1 つである累積レイアウト シフト メトリックが悪化する可能性があります。

Cumulative Layout Shift を最小限に抑えながらページ速度を改善するには、遅延読み込みとBlurHashを組み合わせることをお勧めします。

この記事では、BlurHash とは何か、 imgix を使用して画像に適用する方法について説明します。

画像プレースホルダーと BlurHash とは?

プレースホルダーは、認識される読み込み時間を改善し、接続またはサイトで画像の読み込みが遅い場合にユーザー エクスペリエンスを向上させるための優れたオプションです。 BlurHash は、イメージ プレースホルダーのコンパクト バージョンを作成できるアルゴリズムです。

このアルゴリズムは、画像のぼやけた表現をエンコードする文字列を作成します。文字数は、画像の品質によって決まります。この文字列は、ページのマークアップで直接提供できるほど十分に短いため、画像ファイルを取得してダウンロードすることなく、文字列をぼかした画像にデコードできます。

BlurHash の主な利点は、元のファイルがまだ読み込まれている間に画像のぼやけた表現が表示されるように、大きな画像ファイルをより少量のデータに変換できることです。 Wolt のエンジニアは、低速のインターネット接続で画像がどのように読み込まれるかについてより良い解決策を見つけようとしているときに、 BlurHash のアイデアを思いつきました。

BlurHash 機能の使用方法

ぼかした画像を作成するには、任意の画像にfm=blurhashを追加して BlurHash 文字列を取得します。 BlurHash 文字列を取得したら、それをBlurHashコンポーネントで使用できます。 BlurHashコンポーネントは、ハッシュを表示可能な画像にデコードする役割を果たします。

この特定の例では、React BlurHashコンポーネントが最終的なマークアップで canvas 要素を生成します。注: 生成されるマークアップは、使用するライブラリまたはフレームワーク デコーダーによって若干異なる場合があります。

 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 アカウントを作成してください!