モバイル回線の画像予算 — 総量とbpp（bits-per-pixel）の実数値

「きれい」かつ「速い」を両立する最短ルートは、ページ内の画像を“総量（KB/MB）”と“bpp（bits-per-pixel）”の二軸で管理すること。初回ビューの重さ配分を決め、各画像のbppを目標範囲に収めれば、 4G/5Gどちらでも体験を安定させられます。

先に結論（運用ルールの雛形）

初回ビューの画像総量 ≤ 800KB（JS/CSS含め≤ 1.6MBを目安）。
ヒーロー（LCP）：≤ 200–250KB＋fetchpriority="high"。
カード群：≤ 35KB/枚で6枚想定なら合計≤210KB。
サムネ/図版はbpp 0.25–0.35、写真/ヒーローはbpp 0.35–0.55を出発点に。

要点（TL;DR）

まず総量の上限と重さ配分を決める（ヒーロー/カード/サムネ）。
各画像はbppで管理。可視品質を壊さない最小bppまで下げる。
配信はsrcset/sizesで実幅に一致。LCPはfetchpriority＋preload。
実測（DevTools/PSI/RUM）で確認し、破綻や帯域競合があれば再配分。

1. 初回ビューの“重さ配分”

要素	推奨サイズ	備考
ヒーロー（LCP）	≤ 200–250KB	AVIF（10bit/4:2:0）目安Q=28±2。`fetchpriority="high"`＋preload。
カード（6枚想定）	≤ 35KB/枚（合計≤210KB）	実表示幅480–640px。AVIF or WebP。
ロゴ/アイコン	数KB	SVG推奨（関連：SVGの使い分け）
合計（初回ビュー）	≤ 800KB	JS/CSSと合わせて≤1.6MB目安（状況により見直し）。

2. bpp（bits-per-pixel）の目安

bpp = ファイルサイズ[bit] ÷ 画素数。同解像度でも被写体やノイズ量で必要bppは変化します。まずは下表を出発点に。

用途	推奨bpp	計算例
サムネ（640×360）	0.25–0.35	640×360×0.30bpp ≒ 69KB（AVIF/WebP）
ヒーロー（1600×900）	0.35–0.55	1600×900×0.45bpp ≒ 128KB（高効率時）

※ 輪郭/テクスチャが多いほどbppは上振れ。グラデは10bit/ノイズ付加で破綻を抑制。

3. 調整手順（実務フロー）

表示サイズを確定：デザインから実表示幅/比率を決め、拡大率1.0–1.5×で書き出し。
初期エンコード：AVIF/WebP/JPEGを出力し、可視品質を壊さない最小サイズまでQを調整。
レスポンシブ配信：srcset/sizes を実幅に一致。 LCP画像は fetchpriority="high"＋preload。
実測/可視確認：DevToolsのNetwork/Coverageでサイズ確認、 /compare で画質確認。

4. 画質破綻の対策

グラデの段差 → AVIF10bit／Qを+2〜4、微小ノイズ付加（破綻対策集）。
文字にじみ → 4:4:4 か PNG / WebP Lossless。
輪郭のにじみ（透過縁） → 透過フリンジ対策を参照。

5. 実装レシピ（コピペOK）

A. LCP画像のpreload＋fetchpriority

<!-- HTML -->
<link
  rel="preload"
  as="image"
  href="/img/hero-1200.jpg"
  imagesrcset="/img/hero-800.jpg 800w, /img/hero-1200.jpg 1200w"
  imagesizes="(max-width: 768px) 92vw, 1200px"
/>
<img
  src="/img/hero-1200.jpg"
  srcset="/img/hero-800.jpg 800w, /img/hero-1200.jpg 1200w"
  sizes="(max-width: 768px) 92vw, 1200px"
  alt="ヒーロー"
  width="1200" height="720"
  fetchpriority="high"
/>

B. エンコード（コマンド例）

# 可逆WebP（UIやロゴ）
cwebp -z 9 -lossless input.png -o output.webp

# AVIF（写真・10bit推奨）
avifenc --min 0 --max 63 --cq 28 --yuv 420 --depth 10 input.jpg -o output.avif

CLSゼロの原則

すべての <img> に width/height か aspect-ratio を指定。広告はプレースホルダで高さ確保（詳細：CLSゼロ設計）。

6. 公開前チェック（10項目）

初回ビュー画像総量が目標（≤800KB）以内。
ヒーロー≤200–250KB、カード≤35KB/枚で配分OK。
各画像のbppが目標レンジ（サムネ0.25–0.35／写真0.35–0.55）に収まる。
srcset/sizesが実表示幅に一致、余剰ダウンロード無し。
LCP画像にpreload＋fetchpriority=high。
グラデ破綻/文字にじみ無し（必要なら10bit/4:4:4/可逆）。
CLSゼロ（寸法明示・広告の高さ確保）。
DevTools/PSI/RUMで実測し、帯域競合がない。
差し替え用の指紋（v2等）が付与されている。
参考：/compressor と /compare で容量/見えを確認。

7. まとめ：総量×bppで“速くてきれい”を標準化

画像最適化は感覚ではなく総量とbppの数字で回すと安定します。ルールをチームに共有し、/compressor と /convert を運用フローに組み込みましょう。