画像バジェットと最適化戦略
モダンフォーマット（WebP、AVIF）、レスポンシブ画像、遅延読み込み、圧縮技術を使用して画像パフォーマンスバジェットを配分・最適化。品質を犠牲にせずに画像をバジェット内に収めます。
Category Budget
詳細な説明
画像バジェットの最適化
画像は一般的にページの総ウェイトの40-60%を占めます。パフォーマンス改善の最大の機会ですが、多くのサイトでは必要以上に5-10倍大きい未最適化の画像が配信されています。
画像バジェットの設定
総ページバジェット600 KB（3G目標）の場合、画像は250-300 KBを超えないようにすべきです。4G目標の1,350 KBの場合、画像に500-600 KBを許容できます。
モダン画像フォーマット
| フォーマット | JPEG比節約 | ブラウザサポート |
|---|---|---|
| WebP | 25-35% | 97%以上（すべてのモダンブラウザ） |
| AVIF | 40-50% | 92%以上（Chrome、Firefox、Safari 16+） |
| JPEG XL | 35-45% | 限定的（Chromeでフラグ裏） |
レスポンシブ画像
srcsetを使用してビューポートに応じて異なるサイズを配信：
<img
srcset="product-400.webp 400w,
product-800.webp 800w,
product-1200.webp 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 1200px) 800px,
1200px"
src="product-800.webp"
alt="商品写真"
>
遅延読み込み
ファーストビュー以下の画像はネイティブ遅延読み込みを使用すべきです：
<img src="photo.webp" loading="lazy" alt="...">
これにより、ファーストビュー以下の画像は初期読み込みバジェットから完全に除外されます。
ユースケース
画像バジェットの最適化は、ECサイト、メディアリッチなブログ、ポートフォリオサイト、ヒーロー画像のあるページに不可欠です。目的地写真のある旅行予約サイトは、ページあたり400 KBの画像バジェットを設定し、AVIF/WebP、レスポンシブsrcset、遅延読み込みの使用を強制するかもしれません。画像バジェットなしでは、単一の未最適化JPEGがページウェイトバジェット全体を消費する可能性があります。