WebP/JPEG/PNGの使い分け完全ガイド（画質・容量・透明・用途別）
迷ったら「WebP 80%」が出発点。文字やロゴがにじむなら 85% まで上げるか PNG 可逆、 互換が最優先なら JPEG 85%。この3択をベースに「解像度→形式→品質」の順で決めると最速です。
用途別の最短判断（まずはここから）
- 写真：WebP 80%。ノイズが気になれば 85%。提出先の互換が厳しいときは JPEG 85%。
- ロゴ / 図 / UI / スクショ（文字くっきり）：PNG（可逆）。容量が大きければ WebP 85–90% を試す。
- 透明が必要：PNG または WebP（透明対応）。縁のにじみは背景に近い色でマット処理。
- OGP / サムネ：WebP 80%（1200×630/1280×720）。文字が滲むなら 85%、 ロゴのみは PNG。
形式の特徴と向き・不向き
WebP：軽さと汎用性の主力
写真・イラスト両方に強く、同画質で JPEG より小さくできる場面が多い万能型。透明やアニメにも対応します。 実務では品質 75–85%がコスパの良い帯。小さな文字・細線が滲む場合は 85–90% まで引き上げるか PNG を使うと安心です。
JPEG：互換性最優先の定番
透過は不可ですが、古い環境や業務提出の「まず開ける」要件に強い。80–90%で始め、 ノイズが気になるときのみ上げるのが基本。UI/文字が混在する画像には不向きです。
PNG：可逆・透過・くっきり線
可逆圧縮で劣化なし。ロゴ、図、スクショなど、エッジを保ちたい画像に最適。写真用途では容量が膨らみやすいため、 基本は WebP/JPEG を選び、PNG は「くっきり」「透過」が必要な場面に限定します。
品質チートシート（はじめの一手）
- WebP 80% → OK なら採用。文字/線の滲みが目立つときのみ 85% → 90% と段階調整。
- JPEG 85% → 互換優先の提出・共有に。にじみやノイズが残るなら 90%。
- PNG（可逆） → ロゴ/図/スクショの既定。色数削減やマット処理で容量を抑える。
最短フロー（解像度 → 形式 → 品質）
- 解像度：まずは表示幅に合わせて縮小。本文は横1200〜1600px、一覧サムネは横600〜800pxが目安。→ 画像リサイズ
- 形式の決定：写真=WebP、互換重視=JPEG、ロゴ/図=PNG。→ 画像形式変換
- 品質の微調整：WebP 80%／JPEG 85% を起点に、滲みやノイズの有無で±5%。→ 画像圧縮
- サムネ/OGP：1200×630/1280×720 をテンプレ化、文字7語以内・高コントラスト。→ サムネ一括生成
- EXIF/向き：共有前に位置情報削除＋実回転で安全化。→ EXIF削除＋自動回転
ケース別レシピ（再現できる判断）
A. 写真＋小さな文字が混在するバナー
まず WebP 80% → 文字の滲みを確認 → 気になるなら 85% → それでも残る要素だけ PNG に差し替え。 画像全体をPNGにせず、**混在に合わせて局所最適**にするのがコツ。
B. 業務提出（相手先が古い環境）
JPEG 85% を既定、要件に解像度指定があれば先にリサイズ。透明が必要な部分のみ PNG を併用。
C. スクショやUIの操作説明
可逆の PNG を基本に、写真が混ざるときのみ WebP 85–90%。文字と罫線の可読性を最優先。
よくある落とし穴（回避策）
- DPI とピクセルの混同：Web はピクセル基準。DPI は印刷向けで表示サイズに影響しません。
- 透明縁のにじみ：背景に近い色でマット処理。それでも目立つなら PNG を採用。
- 解像度の過不足：まず縮小で転送量を根本カット。高品質でも大き過ぎれば遅い。
まとめ（チェックリスト）
- 本文は横 1200–1600px、一覧サムネは横 600–800px に統一したか。
- 写真=WebP、互換=JPEG、ロゴ・図=PNG を基本に例外だけ上書きしたか。
- 品質は WebP 80%／JPEG 85% を起点に ±5% で調整したか。
- OGP は 1200×630、文字7語以内・高コントラストで崩れないか。
- EXIF の位置情報削除＆向き補正を済ませたか。