スクリーンショット最適化（可読性を落とさず“軽く”する完全ガイド）
スクショは文字・罫線・UIが密集し、写真向けの圧縮では崩れやすい領域です。正しい順序で触れば、読みやすさを保ったまま軽量化できます。本稿は「解像度→形式→品質→補正」の最短フローと判断基準、 そして公開前のチェックをまとめました。
関連ドキュメント
要点（TL;DR）
- 本文は横1200–1600px、一覧は600–800pxで統一。
- 文字/線主体＝PNG（パレット16–64色） or WebP Lossless、写真混在＝WebP 85%起点（互換はJPEG）。
- 見えの問題は±5%の品質調整で解決することが多い。
- 実装は width/height を付け、 srcset/sizes で帯域最小化。
1. スクショが難しい理由（文字・線が命）
スクショは高周波成分（細い線/明確なエッジ）が多いため、非可逆の量子化や4:2:0のサブサンプリングでにじみ・ギザ・リングが出やすくなります。だからこそ、まずは解像度の整理と形式の選び分けが決定打になります。
- 文字/線主体：PNG（パレット）基準。ディザは弱め〜オフ。
- 写真混在：WebP 85%起点（滲む場合は90%）。
- 配布互換：相手方の都合でJPEG 85–90%も候補。
2. 判断フロー（解像度 → 形式 → 品質 → 補正）
- 解像度の統一：本文は横1200–1600px、一覧は600–800px。 → /resize
- 形式の選択：文字・線＝PNG（パレット）/WebP Lossless、写真混在＝WebP（互換=JPEG）。 → /convert
- 品質の微調整：WebP85%起点。滲むときは+5%、粒状感は-5%。 → /compressor
- 補正：必要に応じ明度差を強め、弱いアンシャープ（0.3–0.6px）で戻す。
3. 見分け方（にじみ／ギザ／バンディング）
- 文字エッジのにじみ：白地に黒文字・黒地に白文字で確認。
- 罫線のギザ：1pxラインの崩れをチェック。
- 背景グラデの段差：段階的な色の切れ目（バンディング）に注意。
判断に迷うときは WebP 85% と PNG（パレット） を並べ、 容量と可読性のバランスで決めましょう。
4. 実装・運用の最短ルール（LCP/CLSも守る）
- 寸法の明示：
width/heightを必ず付与（CLS回避）。広告は固定高を先に確保。 → CWV×画像ガイド - srcset/sizes：実表示幅へ寄せて2x過剰配信を防ぐ。 → レスポンシブ画像ガイド
- キャッシュとハッシュ：差し替えはファイル名バージョン（例：
screenshot_v2.webp）。
5. よくある落とし穴（回避策）
- 解像度を先に整理しない：品質だけ上げても容量はほぼ減らない。
- PNG一択で巨大化：写真混在は WebP 85–90% を比較。
- コントラスト不足：彩度より明度差で可読性を確保。
6. 公開前チェック（10項目）
- 本文1200–1600px／一覧600–800pxに統一した。
- 文字/線＝PNG（パレット） or WebP Lossless、写真混在＝WebPを採用。
- 品質はWebP 85%起点で±5%の範囲で最小化。
- 文字エッジ・1px罫線に滲み/ギザが無い。
- 背景グラデのバンディングが許容範囲。
- すべての img にwidth/heightあり。
- srcset/sizes を実表示幅に最適化。
- ヒーローの画像は優先ロード、fold下は遅延に。
- ファイル名ハッシュで差し替え運用が可能。
- 本番の CWV（field data）に劣化なし。
まとめ：順序を守るだけで“軽くてクッキリ”
スクショ最適化の勝ち筋はシンプルです。解像度→形式→品質→補正の順で触るだけ。 比較は /compare、一括処理は /compressor と /convert を使えば、再現性高く仕上がります。