画像最適化チェックリスト（最短で“速く・軽く・崩れない”）
本稿は“作業前 → 実装 → 公開前”のチェックをひと目で通せるようにした実務リストです。 迷ったら解像度 → 形式 → 品質の順を守るだけで、ほとんどのケースが短時間で解決します。
関連ドキュメント
要点（TL;DR）
- 本文1200–1600px／一覧600–800pxで統一。
- 写真=WebP（互換=JPEG）／ロゴ・図・スクショ=PNG or WebP Lossless。
- 品質はWebP 80%／JPEG 85%起点で±5%のみ動かす。
<img>にwidth/height、ヒーローは優先、fold下は遅延、配信はsrcset/sizes。- OGPは1200×630・四辺広い安全域・高コントラスト・目安200KB。
1. 準備（要件の確認）
- 本文最大表示幅：横1200–1600px／一覧600–800pxを把握。
- 提出/媒体の形式要件（WebP/JPEG/PNG、透過可否、容量上限）。
- OGP=1200×630、YouTube=1280×720、Instagram=1080×1080（詳しくは SNSサイズ早見表）。
2. 解像度を先に統一（根本カット）
画素数を先に減らすと以降の圧縮効果が最大化します。本文1200–1600px／一覧600–800pxが基準。 /resize を使うと安全です。
3. 形式を決める（向き不向きで固定）
4. 品質を±5%で微調整（200KB目安）
起点はWebP 80%／JPEG 85%。文字や細線の滲み→+5%、髪/影の粒状感→-5%。 候補の出力は /compressor が最短です。
5. 実装（LCP/CLS/INP を崩さない）
- すべての
<img>にwidth/height（またはaspect-ratio）。 - ヒーローは優先（先読み/priority）、fold下は遅延。 CWV×画像 も参照。
- srcset/sizesで帯域最小化（過剰な2x配信を回避）。 レスポンシブ画像ガイド
- 広告はページ側の
<AdSlot />に固定高（min-h）を確保（CLS対策）。
6. OGP/サムネはテンプレ化（安全域広め）
OGPは1200×630・四辺の安全域上下60–80px／左右80–120px・タイトル7語以内・高コントラストが定石。 /thumbnail で量産、詳細は OGPテンプレ と OGPの作り分け を参照。
7. 公開前チェック（10項目）
- 本文1200–1600px／一覧600–800pxに統一した。
- 写真=WebP／互換=JPEG／ロゴ=PNGの原則を守った。
- 品質は±5%の範囲で確定し、目安200KBに収まっている。
<img>にwidth/height（or aspect-ratio）を指定した。- ヒーローは優先ロード、fold下は遅延に設定した。
- OGPは1200×630・四辺広い安全域・高コントラスト。
- srcset/sizes を実表示幅に最適化した。
- EXIF（位置情報/向き）を削除（ /exif-strip ）。
- サイトマップ・robots の整合を確認し、OG画像は絶対URLで配信。
- 本番のCWV（field data）に悪化がない（GSC/CrUXで監視）。
8. まとめ：順序で決めて、テンプレで守る
画像は解像度 → 形式 → 品質の順で決めると最短で仕上がります。テンプレとチェックリストで運用を固定化し、 /compressor と /compare で“速さと見え方”を同時に担保しましょう。