画像最適化

画像最適化とは

画像最適化は、Web ページの画像ファイルサイズを削減し、表示速度を向上させる技術群である。画像は Web ページの転送データ量の大きな部分を占めることが多く、LCP (Largest Contentful Paint) に直接影響する。

最適化の 4 つの柱

1. フォーマットの選択

フォーマット	特徴	用途
WebP	JPEG より 25〜35% 小さい、透過対応	写真、イラスト (推奨)
AVIF	WebP よりさらに小さい、対応ブラウザが増加中	写真 (最高圧縮)
JPEG	広くサポート、写真向け	フォールバック
PNG	可逆圧縮、透過対応	アイコン、スクリーンショット
SVG	ベクター、拡大しても劣化しない	ロゴ、アイコン

2. レスポンシブ画像

<!-- デバイスの画面幅に応じて適切なサイズの画像を配信 -->
<img
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  src="hero-800.webp"
  alt="Hero image"
  width="1200"
  height="630"
/>

モバイルに 1200px の画像を配信するのは無駄だ。srcset でデバイスに適したサイズを配信する。

3. 遅延読み込み

<!-- ファーストビュー外の画像は遅延読み込み -->
<img src="photo.webp" loading="lazy" alt="Photo" width="800" height="600" />

<!-- LCP 画像は遅延読み込みしない! -->
<img src="hero.webp" fetchpriority="high" alt="Hero" width="1200" height="630" />

4. サイズの明示

<!-- width/height を指定して CLS を防止 -->
<img src="photo.webp" width="800" height="600" alt="Photo" />

<!-- CSS の aspect-ratio でも可 -->
<style>.photo { aspect-ratio: 4 / 3; width: 100%; }</style>

Next.js の Image コンポーネント

Next.js の Image コンポーネントのコード例を示す。

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={630}
  priority          // LCP 画像: 遅延読み込みしない
  placeholder="blur" // ぼかしプレースホルダー
/>

next/image は自動的に WebP 変換、リサイズ、遅延読み込み、CLS 防止を行う。

CloudFront + Lambda@Edge での画像変換

オリジンの画像を Lambda@Edge でリアルタイムに変換 (リサイズ、WebP 変換) し、CloudFront でキャッシュする。

[ブラウザ] → [CloudFront] → キャッシュヒット → 変換済み画像を返す
                          → キャッシュミス → [Lambda@Edge] → S3 から取得 → 変換 → キャッシュ

画像フォーマットの比較

画像フォーマットの比較を以下に示す。

フォーマット	圧縮	透過	複数フレーム	用途
WebP	高い	半透明まで表現できる	1 ファイルに複数フレームを持てる	写真、イラスト
AVIF	最高	半透明まで表現できる	仕様上は持てるが、書き出せる道具が限られる	次世代フォーマット
PNG	低い	半透明まで表現できる	持てない。動かすなら APNG を使う	ロゴ、アイコン
JPEG	中	扱えず、背景色を焼き込む	持てない	写真
SVG	図形を記述したテキストなので、gzip や brotli がそのまま効く	背景を持たず、下の要素が透ける	フレームという概念は無く、CSS や JavaScript で動かす	ロゴ、アイコン、図

体系的に学ぶなら関連書籍を参照してほしい。