LQIP/プレースホルダ実装 — blurhash・SVG・Dominant Colorの使い所
画像の読み込み前に破綻しない見えを作るのがプレースホルダです。支配色/LQIP/blurhashには得意不得意があります。 本稿では“どこで何を使うか”を、実装負荷と画質の両面から最短で判断できるよう整理しました。
要点（TL;DR）
- カード/一覧：支配色が最軽量。
- ヒーロー/本文の写真：LQIPで雰囲気を先出し。
- アプリ/共通化：blurhash/SVGで統一。
1. 方式の選定基準
- 画質と実装負荷のバランス（LQIP > blurhash > 支配色）。
- INPを悪化させないアニメーション（CSSトランジションで軽く）。
- CLSは寸法指定でゼロ化（
width/height）。
実装メモ
Next/Image の
placeholder を活用するか、CSSで支配色の背景を先に敷く方法、あるいは小さなdata:image/svg+xml;utf8,<svg>…を使うと実装が簡単です。2. ケーススタディ
一覧のカードは支配色、記事内の大きな写真はLQIPで実装。遅延画像のdecode完了でCSSフェードし、JSは最小に。 CLS/INPを守りつつ、体感の破綻がなくなりました。
3. 落とし穴と公開前チェック
- 過剰に濃いプレースホルダ → 本画像差し替え時に違和感。
- JSで重いフェード → INP悪化。CSSで軽く。
- 寸法未指定 → CLS発生。必ず指定。
4. FAQ
LQIPのサイズはどれくらい？
数百バイト〜数KB。画像の特徴量が伝わる最小サイズを探ります。
blurhash をサーバで前計算すべき？
大量ページなら前計算が安定。少量ならクライアント生成でもOKです。
5. まとめ：使い分けの型だけ覚える
一覧=支配色、本文= LQIP、アプリ= blurhash/SVG。これだけで十分戦えます。画像自体の最適化は /compressor と /compare で仕上げましょう。