インライン画像は、シャープ、ブルーハッシュ、ラムダ機能を使用してプレビューします

WebサイトとWebアプリの読み込みは、多くの場合、コンテンツリフローに苦しんでいます。周囲のコンテンツの後の画像の読み込みで、レイアウトの不快なシフトが発生します。このイライラするユーザーエクスペリエンスは軽減できます。 Reactのサスペンスは解決策を提供しますが、画像が完全にロードされるまですべてのコンテンツを遅らせることでパフォーマンスを犠牲にします。より良いアプローチ？ぼやけた画像のプレビューをすぐに表示し、ロード時に高解像度の画像にシームレスに置き換えました。

プログレッシブJPEGは答えのように思えるかもしれません。ぼやけた初期レンダリングに続いて徐々に洗練されます。ただし、プログレッシブJPEGでさえ、初期データを待つ必要があり、同じ初期コンテンツリフローにつながります。

この記事では、2つの代替方法について説明します。カスタムブラーのプレビューの作成とBlurhashの活用です。

使用されるライブラリ：

• jimp（バージョン0.16.1）
• Blurhash（バージョン1.1.5）
• シャープ（バージョン0.30.3）

方法1：カスタムプレビューの生成

画像URLに依存する代わりに、base64エンコードの低品質のぼやけた画像のプレビューをJavaScriptに直接埋め込むことができます。通常、Base64エンコードは大きなファイルサイズにつながりますが、小さくぼやけたプレビューは管理しやすいままです。このプレビューはすぐに表示され、ロードされると高解像度の画像に置き換えられます。

次のresizeImage関数（Brevityのために簡素化）を使用してJIMPを使用してぼやけているプレビューを作成します。

 function resizeImage（src、maxwidth、quality）{
  新しい約束を返す（res => {
    jimp.read（src、async function（err、image）{
      if（image.bitmap.width> maxwidth）{
        Image.resize（maxwidth、jimp.auto）;
      }
      image.quality（quality）;

      const previewimage = image.clone（）;
      previewimage.quality（25）.blur（8）;
      const preview = await previewimage.getBase64async（previewimage.getMime（））;

      res（{status： "success"、image、preview}）;
    }）;
  }）;
}

このプレビューは、小さくはありませんが、元の画像よりも大幅に小さくなっています。対応するReactコード（簡素化）は、プレビューを表示し、フル解像度の画像と交換する処理を行います。

 // ...コンポーネントコードを反応します...

方法2：Blurhashによる改善（およびより良い代替案）

最初に提案されていましたが、BlurhashはBase83エンコーディングを介して非常に小さなプレビューを生成しながら、クライアント側のJavaScriptと必要があります<canvas></canvas>タグは、next.jsやsveltekitなどのサーバー側のレンダリング（SSR）フレームワークに理想的ではありません。

優れた代替手段はプレーズホルダーです。シャープを利用して、後で説明したように同様のラムダインストールの考慮事項を必要としますが、小さなBase64プレビューを生成します。画像の寸法を追跡し、ぼやけたフィルターを適用することにより、SSRに優しいものになりながら、Blurhashに匹敵する結果を達成します。プレビューは、CSSを使用して実際の画像の下に表示でき、シームレスな遷移を提供できます。

オリジナルのBlurhash実装（推奨が少ない）：

シャープライブラリは、Blurhashプレビューを生成できます。 AWS Lambdaの展開については、このインストールコマンドを使用します。

 "install-deps"： "npm i && sharp_ignore_global_libvips = 1 npm i -arch = x64-platform = linux sharp"

次の関数は、Blurhashプレビューを生成します。

 "Blurhash"から{encode、isblurhashvalid}をインポートします。
const sharp = require（ "sharp"）;

async関数getblurhashpreview（src）{
  // ...（鋭い処理とBlurhashエンコード）...
}

PreviewCanvasコンポーネントは、Canvas APIを使用してBlurhashプレビューをデコードおよびレンダリングします。

結論：

画像読み込み中にコンテンツリフローを防ぐことで、ユーザーエクスペリエンスが向上します。カスタムブラーのプレビューを生成するか、PlaiceHolderを使用して、パフォーマンスと視覚的な滑らかさのバランスを提供し、すべての画像がロードされるまでコンテンツレンダリングを遅らせるだけで優れた代替手段を提供します。プロジェクトのニーズとフレームワークに最適な方法を選択してください。

以上がインライン画像は、シャープ、ブルーハッシュ、ラムダ機能を使用してプレビューしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。