A. 滲む（文字/線）
- 品質を+5%（WebP 80→85）。
- 局所はPNG/Losslessで差し替え。
- 4:2:0 が原因のときは 4:4:4 を検証（詳しくは 文字にじみ対策）。
画像圧縮の画質設定ベストプラクティス（判定基準・±5%調整・再現性）
画質設定は感覚ではなく順序で決めるのが最短です。まず解像度、次に形式、最後に品質。 そして品質は±5%の狭いレンジで詰めるだけで多くのケースが決まります。 本稿は起点値・判定の観点・微調整のコツを、再現性のある手順でまとめました。
関連ドキュメント
要点（TL;DR）
- 起点値：WebP 80%／JPEG 85%。そこから±5%で詰める。
- 判定は三点だけ：①文字/線 ②髪・草・影 ③グラデ段差。/compare で 1:1 確認。
- 滲み→+5、粒状感→-5、局所は可逆（PNG/Lossless）で部分差し替え。
- 形式は絵柄で分担：写真=WebP（互換はJPEG）／ロゴ・図=PNG or WebP Lossless。
1. 起点値と判定の観点
| 形式 | 起点値 | 主な観点 |
|---|---|---|
| WebP | 80% | 文字の滲み／髪・草のノイズ／グラデ段差（バンディング） |
| JPEG | 85% | ブロック・輪郭のリング／色にじみ |
| PNG / WebP Lossless | —（可逆） | ロゴ/文字/図形。必要に応じ減色/ディザで容量を下げる |
2. 三点チェック（見分け方）
- 文字/線：白地に黒文字・黒地に白文字で輪郭を見る（1px罫線も確認）。
- 髪・草・影：ディテールが“塗り壁化”していないか。粒状感が強すぎないか。
- グラデ：空やUIのグラデに段差（バンディング）が出ていないか。
判断に迷ったら、候補を/compressorで並べ、 /compareで 1:1 比較するのが最短です。
3. ±5%の調整レシピ（症状→対処）
B. 粒状感/ブロック（髪・草・影）
- 品質を-5%で粒度を整える。
- リングは プリブラー→圧縮→弱アンシャープで抑制。
C. グラデの段差
D. 透明縁の白/色かぶり
- マット/デフリンジを適用。
- 非可逆で縁が荒れる場合は可逆に切替。
4. 標準フロー（解像度→形式→品質）
- 解像度統一（本文1200–1600／一覧600–800） →/resize
- 形式選択（写真=WebP／互換=JPEG／ロゴ=PNG） →/convert
- 起点値で書き出し（WebP 80／JPEG 85）→ /compressor で候補生成。
- 三点チェック→±5%で確定。局所は可逆に差し替え。
5. よくある落とし穴
- 解像度を先に落とさない → 効果が薄い。まず解像度。
- 品質だけで解決しようとする → 容量が膨張。構図/形式を見直す。
- 4:2:0で文字混在 → 4:4:4 or 可逆に分離。
6. 公開前チェック（10項目）
- 本文1200–1600px／一覧600–800pxに統一した。
- 写真=WebP／互換=JPEG／ロゴ=PNGの原則を守った。
- 品質は±5%の範囲で最小化した。
- 文字/線の滲み、髪・草・影の粒状感、グラデ段差を1:1で確認した。
- 局所は可逆（PNG/Lossless）で差し替えた。
- srcset/sizes を実表示幅に最適化した。
- imgにwidth/heightを指定（CLS回避）。
- ヒーローは優先ロード、fold下は遅延に設定した。
- ファイル名ハッシュで差し替え運用ができる。
- 本番のCWV（field data）で悪化がない。
7. まとめ：±5%と“部分可逆”で速く決める
画質設定は迷い始めると終わりません。起点値→三点判定→±5%→部分可逆の型で、速く・再現性高く決めましょう。 比較は /compare、一括生成は /compressor が近道です。