ノイズ低減とシャープの最適順序 — 破綻を抑えて“軽くクッキリ”にする実践フロー
画像の破綻（にじみ・バンディング・輪郭のリング）は、順序を正しく並べるだけで大きく減らせます。とくに UIスクショや薄いグラデ、肌のようなフラット領域は、前処理と後処理の置く場所を間違えると一気に崩れます。 ここでは日々の制作・運用で再現しやすい最短レシピと、実務での判断材料をまとめます。
先に全体フローを学びたい方は 画像圧縮の実務テクニック集 もどうぞ。
要点（TL;DR）
- 順序は「弱プリブラー → 軽ノイズ低減 → 圧縮 → 軽アンシャープ」が基本。
- プリブラーは0.3–0.6pxから。リングが出るときだけ使い、文字は過度にぼかさない。
- ノイズ低減はフラット領域優先（肌・空・壁）。ディテール保持係数は高め。
- アンシャープは半径小／量控えめ／しきい値高めでリング抑制。
- 検証は /compare で 1:1。肌・空・細線・文字を必ず見る。
1. 仕組みと副作用の相関
非可逆圧縮は量子化とサブサンプリングの影響で、微小ノイズが破綻の核になりがちです。 一方で輪郭を強くするとギブス現象（リング）が出やすくなります。そこで、圧縮前に微小成分を整え、 圧縮後に不足分だけ戻すアプローチが理にかないます。
2. 実践レシピ（数値の目安）
| 工程 | 目的 | 初期値 | 注意 |
|---|---|---|---|
| プリブラー | リング抑制・ブロッキング緩和 | 半径 0.3–0.6px | 文字/細線は過剰適用しない |
| ノイズ低減 | フラット領域のざらつき低減 | 強さ: 小〜中（ディテール保持高） | 塗り壁化・ディテール消失に注意 |
| 圧縮 | 容量削減 | WebP 80–85 / AVIF 25–35 | 肌/空/文字で±5を検証 |
| アンシャープ | 輪郭の戻し | 半径 0.3–0.6px / 量 30–70 / しきい値 5–10 | リングが見えたら量を下げる |
3. ケーススタディ：UIスクショの改善
SaaSのサポート記事で、表やボタンの境界にリングが出て可読性が落ちていました。 そこで0.4pxのプリブラー→弱いノイズ低減→WebP Q=85→しきい値高めのアンシャープに変更。 結果、文字のにじみが減り、容量も安定（表示幅も見直し）。以降はテンプレ化し、 スクショ最適化フローに統合しました。
4. 公開前チェックリスト
- 最終表示幅と srcset が設計され、imgに寸法が設定されている。
- リングが出る箇所に対してプリブラーの有無を比較した。
- 肌/空でノイズ低減の過剰適用がない。
- 圧縮後のアンシャープで縁取りが出ていない。
- 比較ビューアで 1:1 確認済み（肌/空/細線/文字）。
5. まとめ：ワンパターン化しない
本稿の順序は起点です。UI主体、写真主体、混在…と用途に応じて微調整すれば、破綻を最小化しつつ容量も抑えられます。 チームでの再現性を高めるため、テンプレプロファイルを数種類作り、 /compare で差分をレビューする運用が有効です。
参考：破綻のタイプ別対策は WebP/AVIFの破綻を防ぐ実践策 にまとまっています。