画像圧縮の実務テクニック集（品質・解像度・形式の合わせ技）
圧縮は数値ではなく順序で決めるのが近道です。まず画素数（解像度）を整え、 次に絵柄に合った形式を選び、最後に品質を±5%の狭いレンジで確定。 この型に従うだけで、可読性（文字/線）とLCPの両立が驚くほど簡単になります。
関連ドキュメント
要点（TL;DR）
- 本文1200–1600px／一覧600–800pxに統一。
- 写真=WebP（互換=JPEG）、ロゴ/図/スクショ=PNG or WebP Lossless。
- 起点：WebP80%／JPEG85% → ±5%で確定。
- 局所のにじみは可逆部分差し替えで解決（ロゴ/テキストだけPNG）。
1. なぜ“解像度 → 形式 → 品質”か
画素数は容量の大半を決めるため、最初に削るのが最短。形式は向き不向きが明確で、判断に時間がかかりません。 品質は最後に±5%刻みで詰めるだけで充分。順序を守ると、調整ループが激減します。
2. 形式と品質のチートシート
3. 標準フロー（解像度→形式→品質）
- 解像度統一：本文1200–1600px／一覧600–800px →/resize
- 形式決定：写真=WebP／互換=JPEG／ロゴ・図=PNG →/convert
- 起点で書き出し（WebP 80／JPEG 85）→/compressorで候補比較。
- 三点判定（文字/線・髪/草/影・グラデ）→±5%で確定。局所は可逆で差し替え。
4. ケース別レシピ（5分で最短解）
A. 写真＋小さな文字が混在
WebP 80% → 滲む箇所だけ85% or ロゴ部のみPNGへ（部分可逆）。
B. 互換要求のある提出
JPEG 85%。解像度指定があれば先にリサイズ、縁が厳密な要素はPNG。
C. スクショ/UI
PNG（パレット32–64色・ディザ弱め）。写真混在時のみWebP 85–90%を比較。
D. OGP/YouTube
1200×630 / 1280×720、WebP 80–85%、安全域広め（OGPガイド）。
5. よくある失敗と回避策
- 解像度を先に落とさない → 品質だけ上げても遅い/重い。まず画素数。
- PNG一択で巨大化 → 写真混在はWebP 80–85%も試す。
- 透明縁の白/色かぶり → マット/デフリンジで解消。
- DPIの誤解 → Webはpx基準。印刷はppi/DPI（A4印刷ガイド参照）。
6. 命名規約/ディレクトリ（再現性を上げる）
例：post-slug/ 配下に hero/thumb/inline を用意し、slug_用途_連番.webp で統一。差し替え時はハッシュ/バージョンを付加してキャッシュ更新を確実に。
7. 公開前チェックリスト（5項目）
- 本文1200–1600px／一覧600–800pxに統一した。
- 写真=WebP／互換=JPEG／ロゴ・図=PNG の原則で例外だけ上書き。
- WebP 80%／JPEG 85% を起点に±5%で微調整（目安200KB）。
- OGPは1200×630、文字7語以内・高コントラストで崩れない。
- EXIF（GPS/向き）処理済み（/exif-strip）。
8. 次のアクション
いますぐ作業するなら： /resize → /convert → /compressor → /thumbnail → /exif-strip。 この順序で迷いなく量産できます。