A. ブログの図解（文字＋図形）
- 基本はPNG/WebP Lossless。色数が多ければWebP Q=88±2。
- 縮小はきれいな分数。表示幅ぴったりに。
WebP/JPEGの文字にじみ対策（品質とシャープネスの落とし所）
テキスト入り画像がモヤっとする／にじむのは、非可逆圧縮の量子化や4:2:0のサブサンプリングが文字の色エッジを削るから。さらに中途半端な縮小倍率や、強すぎるシャープでリング（縁取り）が出ることも。本文では、最短で「軽い×クッキリ」に落とす順序と数値の目安をまとめます。
先に結論
まず表示幅と縮小倍率を整え、文字混在はQ=85–90起点・可能なら4:4:4。 事前に半径0.3–0.6pxの弱シャープ。ロゴやUIは迷わずPNG/WebP Losslessを使い分けます。
要点（TL;DR）
- 縮小は1/2・2/3・3/4などの“きれいな分数”。
- 文字混在：Q=85–90（WebP/JPEG）／可能なら4:4:4。
- UI/ロゴ：PNG/WebP Losslessが基本。
- リング対策：弱シャープ（0.3–0.6px）まで。過剰はNG。
- 検証は /compare で1:1。
1. にじみの正体（4つの因子）
- 量子化（低Q）：細いエッジが甘くなりやすい。
- 4:2:0：色差解像度が落ち、色エッジが滲む。
- 縮小倍率の不整合：1.37×→サンプリング誤差でシャープネス低下。
- 過剰シャープ：縁にハロー（リング）が出る。
逆に言えば、倍率→形式→Q→補正の順に触るだけで解決しやすい、ということです。
2. 最短フロー（倍率→形式→Q→補正）
- 表示幅へリサイズ：縮小は1/2・2/3・3/4などを優先。 複数幅は /srcset で提供。
- 形式の選択：UI/ロゴはPNG/WebP Lossless、写真＋文字はWebP/JPEG比較。
- Q値の起点：文字混在は85–90目安（写真寄りは80–85）。
- サブサンプリング：可能なら4:4:4、4:2:0しか無い時はQ+5で輪郭確保。
- 事前シャープ：半径0.3–0.6px、量は控えめ。リングが見えたら戻す。
破綻が強いときは
にじみ/バンディング/リングの対策集 と、工程全体の順序を整理した ノイズとシャープの最適順序を併用。
3. 用途別レシピ
4. よくある落とし穴
- Qを70台まで落としてブロック化。
- 4:2:0で色エッジ崩れ → 4:4:4推奨。
- 1.37×などの中途半端な縮小倍率。
- シャープ過多でリングが出る。
5. 公開前チェック（8項目）
- 表示幅に合わせ、縮小はきれいな分数で行った。
- 文字主体：PNG/WebP Lossless or WebP/JPEG Q=85–90。
- 可能なら4:4:4、4:2:0時はQ+5で輪郭確保。
- 必要な範囲だけ弱シャープ（0.3–0.6px）。
- 文字エッジ・1px罫線・背景グラデの段差を1:1で確認。
- 形式切替/圧縮は /convert・/compressor を使用。
- imgにwidth/heightを指定（CLS対策）。
- 必要なら 順序 も見直し。
6. まとめ：順序と数値で“軽く・クッキリ”
文字にじみは順序（倍率→形式→Q→補正）と数値（Q=85–90・シャープ0.3–0.6px・きれいな分数）で最短に克服できます。 迷ったら /compare で1:1確認、ロゴは可逆で切り分けるのが安定です。