ブログに戻る

BlurHashアルゴリズムでユーザー体験を向上

•4 min read 分で読める
PerformanceWeb

概要

この記事では、画像最適化技術の1つである画像プレースホルダーの使用に焦点を当てます。特に、BlurHashアルゴリズムを使用して画像プレースホルダーを作成する方法を紹介します。

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

ページ速度とユーザー体験は、アプリに画像が多すぎたり、画像が非常に大きくて読み込みが遅い場合に大きく影響を受ける可能性があります。実際、アプリの実行速度に影響を与える最大の要因の1つは画像の使用です。

プレースホルダー画像は、実際の画像がダウンロードされるのを待つ間、ブラウザが最初に読み込むことができる仮の画像です。プレースホルダーはファイルサイズがはるかに小さいため、ページ速度の向上に役立ちます。

BlurHashとは

BlurHashアルゴリズムを使用して画像のぼかしバージョンを作成することで、より美しいデザインの画像プレースホルダーを構築できます。

このプロセスには、画像の不正確な表現をエンコードする文字列を生成することが含まれ、生成される文字数は画像品質に基づきます。

BlurHashの仕組み

BlurHashは画像データに単純なDCT（離散コサイン変換）を適用し、最初のいくつかのコンポーネントのみを保持し、これらのコンポーネントをbase 83エンコーディングでエンコードします。

BlurHash文字列の構造

例：LlMF%n00%#MwS|WCWEM{R*bbWBbH

  1. コンポーネント数（1桁）
  2. 最大ACコンポーネント値（1桁）
  3. 平均色（4桁） - sRGB空間での画像の平均色
  4. ACコンポーネント（各2桁） - DCT変換のACコンポーネント

Next.jsでのBlurHash実装

Next.jsアプリの動的画像の場合、placeholder属性に'blur'を値として追加します：

import Image from "next/image";

const featuredWorks = [
  {
    img: "/static/images/projects/featured/buka.png",
    imgBlur: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...",
    title: "Bukalapak",
  },
];

function ProjectCard({ project }) {
  return (
    <Image
      src={project.img}
      placeholder="blur"
      blurDataURL={project.imgBlur}
      alt={project.title}
      width={400}
      height={300}
    />
  );
}

パフォーマンスの利点

BlurHashを使用することで得られる利点：

  1. CLS（Cumulative Layout Shift）の削減 - プレースホルダーが画像用のスペースを確保
  2. 知覚パフォーマンスの向上 - ユーザーは即座にプレビューを見る
  3. ペイロードの削減 - BlurHash文字列は通常20〜30文字
  4. プログレッシブエンハンスメント - プレースホルダーはJavaScriptなしでも機能

結論

BlurHashは、画像を読み込む際の知覚読み込み時間とユーザー体験を向上させるためのエレガントなソリューションです。Next.jsでの実装は簡単で、ユーザーに即座に視覚的フィードバックを提供します。