SVGとラスター画像（PNG/JPEG/WebP/AVIF）の使い分け完全ガイド
ロゴやUIはSVG？ 写真はAVIF/WebP？——正解は「ケースで使い分け」です。 本稿は パス数・容量・描画コスト を指標に、現場で迷わないための閾値とフローを提示します。
関連ガイド
レスポンシブ配信は srcset/sizes実践ガイド ／ OGPは OGPテンプレ を参照。
要点（TL;DR）
- ロゴ/アイコン/シンプル図形/UIは SVG：拡大縮小で滲まず、1つで全解像度に対応。
- 写真/テクスチャ/広いグラデは ラスター（AVIF/WebP/JPEG）：圧縮効率と描画の軽さが武器。
- SVGはパス数とフィルターが増えると重くなる。目安は パス総数 < 3,000 / ファイル < 150KB。
- ラスターは表示サイズに最適化した解像度で。LCP画像は
priority＋fetchpriority="high"。 - 迷ったら：UIはSVG、写真はAVIF→互換でWebP/JPEGも用意（自動変換でOK）。
SVG vs ラスターの比較表
| 項目 | SVG | ラスター（PNG/JPEG/WebP/AVIF） |
|---|---|---|
| 解像度依存 | 非依存（ベクター） | 依存（ピクセル） |
| 得意領域 | ロゴ/アイコン/UI/イラスト | 写真/質感/複雑な陰影 |
| 容量の傾向 | 単純形状は極小／複雑形状は急増 | 画素数に比例。AVIF/WebPは高効率 |
| 描画コスト | パス数・フィルタ依存（CPU/GPU負荷） | 安定（デコードして描画） |
| アクセシビリティ | DOM化/タイトル/descで補助しやすい | 代替テキスト（alt）中心 |
実務の判断基準（閾値の目安）
- SVG推奨：ロゴ/アイコン/図形ベース、パス総数 < 3,000、フィルタ/ブラー最小、容量 < 150KB。
- ラスター推奨：写真・複雑グラデ・ノイズ/テクスチャ、SVG容量が200KB超または重いフィルタを使用。
- 解像度設計：表示幅の1.0〜1.5×を上限に。高密度は srcset/sizes を正しく設定。
具体的な使い分けフロー
- 対象を分類：UI/ロゴ/図形 → SVG、写真/質感 → ラスター。
- SVG：ストローク統合、不要グループ削除、座標の小数丸めで最適化（SVGO等）。
- ラスター：写真AVIF、互換WebP、透過UIPNG。Q/ビットレートは可読性が落ちない最小まで。
- LCP候補には
priority/fetchpriority="high"、広告枠は固定高でCLS回避（本サイト実装済）。
落とし穴と対策
- SVGのテキストを全面アウトライン化 → 可読性・検索性が低下。可能ならテキスト要素を保持。
- フィルタ/ブラー多用 → 描画がカクつく。影はドロップシャドウのビットマップ化も検討。
- ラスターの過剰解像度 → 無駄なダウンロードでLCP悪化。実寸+α（1.5×程度）で十分。
- 色管理：配布はsRGBが基本（関連： sRGBガイド）。
公開前チェック（8項目）
- SVGは最適化（SVGO）済み・パス < 3,000・容量 < 150KB。
- ラスターは用途に応じてAVIF/WebP/JPEG・表示幅に合わせた
srcset。 - LCP画像は
priority/fetchpriority。 - 広告は固定高でCLSゼロ（
min-height確保）。 - 色はsRGB、OGPもsRGB/8bit/JPEGで安定。
- SVGで重いフィルタを使っていないか（必要ならビットマップ化）。
- PNGは必要最小限。可逆WebPで代替できないか。
- 仕上げに /compare と /compressor で画質/容量の落とし所を確認。
まとめ
UI/ロゴ=SVG、写真=AVIF/WebPを基本線にし、閾値とチェックリストで運用を標準化しましょう。これだけで CWVの改善と画質の両立がぐっと近づきます。