WebP/AVIFの典型的な破綻と対処法
圧縮を攻めると副作用が出ます。文字のにじみ、グラデの段差、輪郭の振動ノイズ、ブロックの段差……。 本稿は原因を短く把握し、コーデック設定＋前処理で現場的に直すためのチートシートです。
関連ガイド
要点（TL;DR）
- 文字/UIは 4:4:4 または可逆（PNG/WebP Lossless）。
- グラデは 10bit（AVIF）＋Q緩和（数値を小さく）。必要なら微小ノイズ付加。
- 輪郭ノイズは事前シャープ弱め＋Q緩和。過度なアンシャープは禁物。
- ブロッキングはQ緩和または解像度最適化（実幅に合わせる）。
- 検証は白/黒背景トグルと視覚差分で。LCPにはfetchpriorityとpreload。
1. 破綻の種類と原因
| 症状 | 主な原因 | 典型シーン |
|---|---|---|
| にじみ（クロマブリード） | 4:2:0の色サブサンプリング | 小さな文字/UI、細線、コントラストの高い境界 |
| バンディング | 量子化＋8bitの段差 | 空やグラデーション、夜景の陰影 |
| リングング/モスキート | 過度なシャープ＋高圧縮 | 黒文字の縁、ロゴの境界 |
| ブロッキング | 低ビットレートでのブロック境界強調 | 低Qで強く圧縮した写真 |
2. 対策早見表
3. 実務レシピ（Sharp / cwebp / avifenc）
import sharp from "sharp";
// グラデ画像のAVIF（10bit + Qゆるめ）
await sharp("input.png")
.avif({ quality: 62, effort: 6, chromaSubsampling: "4:2:0", depth: 10 })
.toFile("out.avif");
// UI混在のWebP（4:4:4）
await sharp("ui.png")
.webp({ quality: 90, effort: 5, smartSubsample: false })
.toFile("out.webp");# cwebp（UI混在：4:4:4） cwebp -q 90 -m 6 -mt -af -sharp_yuv -alpha_q 100 -sns 50 -segments 4 -v -o out.webp in.png # avifenc（グラデ保護：10bit + Q緩和） avifenc --min 0 --max 63 --cq-level 26 --yuv 420 --depth 10 --speed 5 -o out.avif in.jpg
文字/UIは可逆や4:4:4が安全。グラデはbit深度とQで段差を抑えます。最終は実表示幅に合わせたsrcset/sizesで過大ダウンロードを防止。
4. 検証と回帰防止
- 白/黒背景のトグルで縁のにじみを確認（透過は特に）。
- 視覚差分（pixelmatch等）とΔE（CIEDE2000）の両輪で監視。
- ヒーローはpreload＋fetchpriority=high、CLSゼロ（寸法明示）。
5. 公開前チェック（10項目）
- 文字/UIににじみ無し（必要なら4:4:4/可逆）。
- グラデ段差が解消（10bit＋Q緩和済み）。
- 輪郭ノイズが収束（事前シャープ弱め）。
- ブロッキングが目立たない（Q/解像度を調整）。
- srcset/sizesが実幅と一致、過大ダウンロード無し。
- CLSゼロ：
width/height明示、広告はプレースホルダで高さ確保。 - 白/黒背景で縁が破綻しない（透過チェック）。
- Before/Afterを /compare で視覚比較。
- PSI/RUMでLCP/INPの悪化がない。
- 差し替え時は指紋（v2等）でキャッシュ更新。
6. まとめ：設定×前処理で“壊さない”
破綻の多くは設定の相性と前処理で止まります。文字=4:4:4、グラデ=10bit、 輪郭=シャープ弱め、解像度=実幅準拠。この型を運用に落とし込めば、画質と軽さの両立が安定します。