imgix では、ユーザー エクスペリエンスとページ パフォーマンスを重視しています。以前は、  説明しました。基本的に、訪問者がスクロールして画像がビューポートに入るまで、画面外の画像の読み込みを遅らせます。これにより、一度に読み込む画像が少なくなり、各画像の読み込み時間が短縮されます。 遅延読み込みと Core Web Vitals でのその利点について ただし、適切に設定されていない場合、遅延読み込みによってページ レイアウトが不安定になり、Web の 3 つの主要要素の 1 つである累積レイアウト シフト メトリックが悪化する可能性があります。  Cumulative Layout Shift を最小限に抑えながらページ速度を改善するには、遅延読み込みと を組み合わせることをお勧めします。 BlurHash この記事では、BlurHash とは何か、  imgix を使用して画像に適用する方法について説明します。 画像プレースホルダーと BlurHash とは? プレースホルダーは、認識される読み込み時間を改善し、接続またはサイトで画像の読み込みが遅い場合にユーザー エクスペリエンスを向上させるための優れたオプションです。 BlurHash は、イメージ プレースホルダーのコンパクト バージョンを作成できるアルゴリズムです。 このアルゴリズムは、画像のぼやけた表現をエンコードする文字列を作成します。文字数は、画像の品質によって決まります。この文字列は、ページのマークアップで直接提供できるほど十分に短いため、画像ファイルを取得してダウンロードすることなく、文字列をぼかした画像にデコードできます。   BlurHash の主な利点は、元のファイルがまだ読み込まれている間に画像のぼやけた表現が表示されるように、大きな画像ファイルをより少量のデータに変換できることです。 Wolt のエンジニアは、低速のインターネット接続で画像がどのように読み込まれるかについてより良い解決策を見つけようとしているときに、  。 BlurHash のアイデアを思いつきました  BlurHash 機能の使用方法 ぼかした画像を作成するには、任意の画像に を追加して BlurHash 文字列を取得します。 BlurHash 文字列を取得したら、それを コンポーネントで使用できます。  コンポーネントは、ハッシュを表示可能な画像にデコードする役割を果たします。 fm=blurhash BlurHash BlurHash この特定の例では、React  コンポーネントが最終的なマークアップで canvas 要素を生成します。注: 生成されるマークアップは、使用するライブラリまたはフレームワーク デコーダーによって若干異なる場合があります。 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

このオーディオは、ストーリーの元の言語で制作されています。

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

About Author

コメント

ラベル

この記事は

Related Stories

ユーザー中心の暗号通貨製品の作成: 顧客からのフィードバックの重要性

ワークフローを10倍に向上させる方法: 必須アプリ17選

デジタルノマドの皆さん、タイの新しい DTV ビザについて知っておくべきこと

AI/ML データレイクのリファレンスアーキテクチャを構築するためのアーキテクトガイド

ユーザー中心の暗号通貨製品の作成: 顧客からのフィードバックの重要性

ワークフローを10倍に向上させる方法: 必須アプリ17選

デジタルノマドの皆さん、タイの新しい DTV ビザについて知っておくべきこと

AI/ML データレイクのリファレンスアーキテクチャを構築するためのアーキテクトガイド

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps

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