フォーマット変換の戦略 2025 — WebP/AVIF/JPEG/PNG を使い分ける指針

公開: 2025年9月18日 · 読了目安: 2 分 · 著者: Unified Image Tools 編集部

はじめに

正しいフォーマット選択は、容量と再現性の両立に直結します。写真は WebP/AVIF、UI/ロゴは PNG/ロスレス WebP が基本線ですが、例外の見極めと運用の自動化がスケールの鍵です。本稿は「決定木 → 実装 → 例外管理」の順でまとめます。

決定木（実務チートシート）

透過が必要？
  ├─ はい → PNG / ロスレス WebP
  │       └─ 小さなアイコン → SVG を最優先で検討
  └─ いいえ → 写真系？
          ├─ はい → AVIF を試験 → 破綻があれば WebP
          └─ いいえ（図/テキスト/UI） → WebP(ロスレス/高品質) or PNG

補助軸として「再現性と設備」を見ます。色管理は sRGB を既定にし、例外だけ P3 を併用（詳細は正しいカラー管理とICCプロファイル戦略 2025 ─ Web画像の色再現を安定させる実践ガイド）。

サンプル実装（Node.js / sharp）

ワンパス原則でマスターから派生を生成します。再圧縮の連鎖は避けてください。

import sharp from 'sharp'

type Kind = 'photo' | 'ui' | 'logo'

export async function convert(input: string, kind: Kind, outBase: string) {
  const src = sharp(input).withMetadata({ icc: 'sRGB' }).toColorspace('srgb')

  if (kind === 'photo') {
    // まず AVIF を試す。肌/グラデーションで破綻が出る場合は q を上げるか WebP に切り替え
    await src.avif({ quality: 58, effort: 4 }).toFile(`${outBase}.avif`)
    await src.webp({ quality: 78 }).toFile(`${outBase}.webp`)
  } else if (kind === 'ui') {
    // UI/テキストはリング/ブロックノイズが目立ちやすい
    await src.webp({ quality: 90, lossless: false }).toFile(`${outBase}.webp`)
    await src.png({ compressionLevel: 9 }).toFile(`${outBase}.png`)
  } else {
    // ロゴ等はロスレス優先
    await src.webp({ lossless: true }).toFile(`${outBase}.webp`)
    await src.png({ compressionLevel: 9 }).toFile(`${outBase}.png`)
  }
}

互換性とフォールバック

現行の主要ブラウザは WebP/AVIF に広く対応していますが、長期運用ではフォールバック戦略が保険になります。

<picture>
  <source type="image/avif" srcset="/img/hero.avif" />
  <source type="image/webp" srcset="/img/hero.webp" />
  <img src="/img/hero.jpg" width="1600" height="900" alt="" />
  <!-- JPEG は最後の保険として最小限に -->
  <!-- sizes/srcset は別記事参照: /ja/articles/responsive-images-srcset-sizes-2025 -->
  <!-- レイアウトからの上限幅設計は: /ja/articles/resizing-right-size-workflows-2025 -->
  <!-- 圧縮の基本戦略は: /ja/articles/ultimate-image-compression-strategy-2025 -->
  <!-- 色の扱いは: /ja/articles/image-color-management-2025 -->
  <!-- メタデータの扱いは: /ja/articles/safe-metadata-policy-2025 -->
</picture>

Next.js の <Image> を使う場合は、sizes をレイアウトに合わせるのが最重要です（2025年のレスポンシブ画像設計 — srcset/sizes 実践ガイド）。

品質の見極めポイント

写真: 肌・空・グラデーションに着目。AVIF q を 45→58→62 と段階確認し、バンディングやブロックが残るなら WebP に切替。
UI/図: 細い線や文字のにじみ/リングに注目。ロスレス優先、あるいは WebP 高品質。
透過: PNG は 8bit パレット化が効くケースあり。不可逆で破綻するならロスレス。

PNG 最適化の現実解

同じ PNG でも無駄なチャンクやガンマでサイズが膨らみます。ロスレス最適化と、可能なら 8bit/パレット化を試します。小物は SVG 化が最優先です。

大量の PNG を扱うときは、変換時に必要なメタだけを保持する設計が安全です（位置情報やサムネ埋め込みは不要）。詳細は安全なメタデータ方針 2025 — EXIF 削除・自動回転・プライバシー保護の実務。

よくある落とし穴

変換前にリサイズを忘れる（面積が支配項）→ 先に 2025年のリサイズ設計 — レイアウトから逆算して 30–70% の無駄を削る
再圧縮チェーン（画質崩壊）→ マスターからワンパス
ICC を無自覚にストリップ → 色再現が崩れる（正しいカラー管理とICCプロファイル戦略 2025 ─ Web画像の色再現を安定させる実践ガイド）
AVIF を盲信して UI に適用 → 文字エッジが崩壊

テストマトリクス（品質検証）

写真: 肌/空/グラデーション/木目/夜景で AVIF/WebP/JPEG を比較（q 段階 45/58/62）
UI/テキスト: 細線/小文字/斜体/縁取りで WebP lossless/高品質/PNG を比較
透明: 半透明/影/アウトラインの階調が破綻しないか確認

PNG 最適化の深掘り

パレット 8bit 化（減色）は視覚差が出にくい範囲で段階的に試す
メタ削除でサイズ削減（位置情報/サムネイルは不要）
ロスレス WebP との二者択一は、転送量と描画速度で比較して決定

よくある質問（FAQ）

Q. まず AVIF を選ぶべき？
- A. 写真では第一候補ですが、肌やグラデで破綻が残るケースもあります。段階的に q を上げ、難しい場合は WebP に切り替えます。
Q. UI で AVIF は？
- A. 文字エッジや細線で破綻が目立つため、推奨しません。WebP 高品質 or PNG が安全です。
Q. picture は常に必要？
- A. 互換や保険のために有効ですが、Next.js <Image> では sizes を正しく書くことの方が効果が大きい場面も多いです。

デプロイと配信の注意

変換はマスター→派生のワンパスを厳守（再圧縮の連鎖を避ける）
Content-Type や Vary ヘッダの適正化（CDN キャッシュの分割ミスを防止）
Accept ヘッダでのネゴシエーションを使う場合は、ログでヒット率を監視
画像の幅/高さを明示して CLS を抑制。sizes 設計と合わせて過配信を防ぐ

トラブルシュート

文字が滲む → AVIF/WebP の品質を段階的に上げる or PNG/WebP ロスレスへ
肌やグラデが汚れる → AVIF の品質と effort を調整、厳しい場合は WebP に切替
透明影がギザつく → PNG か WebP ロスレスで再出力。8bit パレットの段階を調整

まとめ

透過とコンテンツ種別で枝分かれ、2) sRGB 正規化 → マスターからのワンパス変換、3) picture/<Image> で安全に配信、4) 品質はテストマトリクスと実測で確認。ここまで固めれば、残りはチューニングです。続いて sizes/srcset の設計へ: 2025年のレスポンシブ画像設計 — srcset/sizes 実践ガイド。

X で共有記事一覧へ

色