まず何から決めれば崩さずに軽くできますか？

表示幅 → 形式 → 品質（Q値）の順。先に幅を決め、用途に合わせてWebP/JPEG/PNG/AVIFを選び、最後にQ値で微調整します。

Q値の目安は？サブサンプリングは？

写真寄り＝80–85%／文字や図を含む＝85–90%。色エッジを守るには4:4:4を優先、4:2:0を使うならQを上げて輪郭を確保します。

CLSを出さないの実装は？

width/height（またはCSSのaspect-ratio）を必ず指定。srcsetで複数幅を用意し、ヒーローはeager、fold下はlazy。

画像圧縮FAQ 2025 — 失敗しない形式選び・Q値・実装の完全版

Q: WebP/JPEG/PNG/AVIFの使い分けは？

写真＝WebP（互換が必要ならJPEG）／文字・図・ロゴ・透過＝PNG or WebP Lossless／最高効率＝AVIF（ただしエンコード時間と互換性を要検討）。

画像最適化は「表示幅 → 形式 → Q値」の順で決めると迷いません。本文では、現場で本当によく受ける質問に実務の落とし所で答えつつ、失敗しがちなNG例と公開前チェックをまとめました。比較や可視確認は /compressor と /compare を活用してください。

要点（TL;DR）

まず表示幅を決める。次に形式、最後にQ値。
写真はWebP 80–85起点（互換重視はJPEG）。文字/図はPNG or WebP Lossless。
文字混在やグラデは4:4:4優先。4:2:0しか使えない時はQを+5目安。
実装は width/height 指定と srcset/sizes でCLSを回避。
破綻対策（にじみ/リング/バンディング）はこちらを参照。

Q1. まず何から決めるべき？

最初に実表示幅を確定します。ヒーローなら800–1200px、本文内なら1200–1600pxを上限として、端末密度はsrcset で吸収。幅が決まれば、形式とQ値の最適点が一気に見えてきます。

幅が曖昧だと最適化は当たりません

幅が曖昧なまま Q 値をいじっても 帯域も画質も不安定です。まず幅、次に形式、最後に Q 値。

Q2. WebP/JPEG/PNG/AVIFの使い分けは？

A. 写真主体

基本：WebP（高効率×互換バランス）
互換重視：JPEG（Q=85±5）
最高効率：AVIF（エンコード時間/互換を要検討）

B. 文字/図/ロゴ・透過

可逆：PNG / WebP Lossless
スクショ：パレットPNG（16–128色）＋ディザ弱めで軽量
透過縁：マット/デフリンジで白縁回避

形式比較の背景知識は形式の使い分けガイド /AVIFとWebPの比較も参照。

Q3. Q値とサブサンプリングの目安は？

写真＝80–85%／文字混在＝85–90%（WebP/JPEG）
文字・UI・グラデは4:4:4を優先。4:2:0ならQを+5目安
縮小倍率は1/2・2/3・3/4など“きれいな分数”で輪郭が安定

破綻が見えたら

にじみ/バンディング/リングの対策レシピを併用。写真が甘い時は0.3–0.6pxの弱アンシャープで戻します。

Q4. 透過PNG/WebPで白縁が出ます

背景とのアルファ合成で縁が目立つ場合、想定背景のマット色を敷くと安定します。ロゴは可逆を維持するのが基本。実務テクニックは背景透過の画質を守るに整理済みです。

実装：CLSを出さない最短レシピ

<img
  src="/img/hero-800.webp"
  srcset="/img/hero-480.webp 480w, /img/hero-800.webp 800w, /img/hero-1200.webp 1200w"
  sizes="(max-width: 800px) 100vw, 800px"
  width="800" height="450"  /* ← CLS対策（寸法は必須） */
  loading="eager" decoding="async" alt="..." />

生成・比較は /srcset と /compressor が便利。

NG例（よくある失敗）

Q を 70 台まで下げてブロック化（写真が粗い）
4:2:0 で文字の色エッジ崩れ（にじみ）
幅未指定でCLS発生
スクショをJPEG保存（UI/文字がにじみやすい）

拡張FAQ（ケースで学ぶ）

AVIFは常に最適ですか？

最高効率ですが、エンコード時間と互換性のトレードオフがあります。更新頻度が高いメディアはWebP中心、OGPや静的資産はAVIFを選ぶと安定です（詳しくは AVIF設定チートシート）。

ロゴの“にじみ”が取れません

可逆（PNG/WebP Lossless）へ切替。背景が決まっているならマットを適用して縁を馴染ませます。

“モヤる”時の順序を教えて

診断フローに沿って、表示幅→縮小比→形式→Q/サブサンプリング→実装の順で確認すると最短で収束します。

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

表示幅に合わせてリサイズ（本文1200–1600px・一覧600–800px）
写真＝WebP/JPEG、文字/図/ロゴ＝PNG or WebP Lossless、AVIFは選択的
Q値：写真80–85／混在85–90、にじみ時は+5
サブサンプリング：4:4:4優先（可能なら）
縮小比は1/2・2/3・3/4の“きれいな分数”
imgにwidth/height（or aspect-ratio）を指定
srcset/sizes を用意
ヒーローはeager、fold下はlazy
EXIF位置情報は削除（EXIF削除）
Before/Afterを比較スライダーで確認

まとめ：判断は「幅→形式→Q値」で速く正確に

形式やQ値で迷うときは、まず表示幅を決めるところへ戻るのが最短です。書き出しは /compressor、最終の見え方は /compare で確認して、破綻が見えたら対策集を併用しましょう。