圧縮アーティファクト監査 2025 — 見るべき箇所・悪化条件・回避策

はじめに

圧縮は「軽さ」と「画質」のトレードオフです。本稿では、実務で素早く劣化を見抜き、品質を担保するための監査ポイントを体系化します。

本記事は「最短で判断できる視点」を中心に、形式（JPEG/WebP/AVIF）の違い、チェック手順、劣化を招く典型パターン、回避の実務ノウハウまでをまとめます。設計・制作・配信・QA の各フェーズで使えるチェックリストも付属します。

主要なアーティファクトと観察ポイント

• ブロッキング（ブロック状のムラ）: 低品質 JPEG で顕著。フラット背景や空・肌で確認。
• リングイング（輪郭のハロ）: 強いエッジの周囲に生じる。ロゴ/テキストや線画で確認。
• バンディング（階調段差）: グラデーション背景に水平/放射状の段差。夜空・ぼかし背景で確認。
• 色ずれ/クロマブリード: サブサンプリング時の色滲み。赤い細線やカラーボーダーで確認。
• モスキートノイズ: 低品質で細部周りに波打つザラつき。細かい模様や髪の毛で確認。

参考: 画像の画質評価指標 SSIM/PSNR/Butteraugli 実践ガイド 2025

観察のコツ（見落とし削減）

• 200–300% に拡大して「輪郭」と「フラット面」を交互に見る（短時間で劣化が浮き出る）
• 原版と並べて水平スライダーで比較するのが最速（視覚負荷が小さい）
• 1 枚だけで判断しない。肌・空・木々・細線など「破綻が出やすい種類」を最低 3 パターン確認
• 複数形式（JPEG/WebP/AVIF）で同容量比較を取ると、形式の得手不得手が明確になる

悪化させる条件（要注意）

1. 過度な再圧縮（多段変換）
2. 低ビットレート + 高周波テクスチャ（芝、髪、織り）
3. 過剰なシャープネス付与
4. サブサンプリング 4:2:0 での細い赤/青ライン
5. 色空間の不整合（意図しない色域クリッピング）

形式別の「出やすい癖」メモ

• JPEG: ブロッキング、リングイングが顕著。低品質域で肌や空が汚れやすい
• WebP（有損）: 細線文字のクロマ滲み。写真は比較的素直だが、彩度高め領域で色境界がにじむことあり
• AVIF: 同容量で高品質傾向。ただし低ビットレートでコントラストの「にじみ」を感じることがある

実務フロー（最短チェック）

1. まず 画像圧縮 で「最大幅」「品質」をざっくり固定し、容量の当たりを取る。
2. つぎに 画像比較スライダー で原版と比較。上記の観察ポイントを一通り確認。
3. さらに必要なら 高度変換 (AVIF/WebP) でサブサンプリングや色空間を試す（UI段階）。

関連記事: 画像圧縮 完全戦略 2025 ─ 画質を守りつつ体感速度を最適化する実践ガイド

スナップ判断のための閾値例（目安）

• UI 文字/図版（線画優位）: JPEG/WebP なら品質「中〜高」固定、AVIF を同容量で比較。細線のにじみが出たら 4:4:4 を検討
• 写真（肌や空が支配）: AVIF 優先。輪郭ハロが気になればシャープネス控えめ＋若干のノイズ付与
• ヒーロービジュアル: 目標容量を 200–400KB に収めつつ、原版比較で違和感ゼロを目指す

回避・緩和の具体策

• 再圧縮の回避: 元の高品質データから一発出力する。
• サブサンプリングの見直し: 細線/文字は 4:4:4、写真は 4:2:0 を基本線に使い分け。
• ノイズの微量付与: バンディング緩和に有効（ポスタリゼーション対策）。
• 適切な最大幅の設定: 無駄な高解像度は圧縮負荷と破綻を招く。

推奨パラメータの例（CLI）

JPEG（cjpeg 系の例）

# 文字/線画寄りの素材（サブサンプリング無し + 軽い彩度抑制）
cjpeg -quality 82 -sample 1x1 -optimize -progressive -outfile out.jpg in.png

# 写真寄り（標準 4:2:0）
cjpeg -quality 78 -sample 2x2 -optimize -progressive -outfile out.jpg in.png

WebP（cwebp）

# UI/線画をできるだけ保持（やや品質高め）
cwebp -q 82 -m 6 -alpha_q 90 -mt -o out.webp in.png

# 写真寄り（効率重視）
cwebp -q 72 -m 4 -mt -o out.webp in.jpg

AVIF（avifenc）

# 速度と品質のバランス（速度 6、CQ 28 目安）
avifenc --speed 6 --min 20 --max 35 --cq-level 28 -a tune=psnr -o out.avif in.png

# 文字/線画優先なら 4:4:4 を試す
avifenc --speed 6 --min 18 --max 32 --cq-level 26 --yuv 444 -o out.avif in.png

注: 実際の閾値は素材依存です。最終判断は原版比較（視覚）で行います。

監査チェックリスト

• [ ] 背景のフラット面にブロック/バンディングがない
• [ ] 文字・ロゴ周辺でハロ/滲みがない
• [ ] 細かい模様でモスキートノイズが目立たない
• [ ] 色域/色空間が意図どおり（sRGB/P3）
• [ ] 実用容量の範囲（用途別しきい値を定義）

監査プロトコル（5分完了）

1. 原版と候補（形式×品質×サイズ違い）を 2–3 パターン用意
2. 比較スライダーで 200% 拡大し「フラット面 → 輪郭 → 細線 → 肌 → グラデーション」の順に巡回
3. 最も違和感が少ないものを選定、容量が許容外なら再調整
4. 最終決定版を 1x/2x/3x など代表解像度でダブルチェック

FAQ

• Q: SSIM/PSNR が高ければ十分ですか？
• A: 参考にはなりますが、知覚品質を完全には代替しません。ハロ/バンディングなどは指標とズレることがあります。
• Q: WebP と AVIF の使い分けは？
• A: 写真は AVIF が軽くなる傾向、UI/線画は WebP（ロスレス含む）が有利な場面があります。互換性と速度も考慮してください。

まとめ

「どこを見るか」を定義することで、短時間でも確かな品質保証が可能になります。比較と二度手間の削減で、劣化の累積を防ぎましょう。

付録 A: 比較 UI の最小サンプル

<div class="cmp">
  <img src="original.jpg" alt="original">
  <img class="top" src="candidate.avif" alt="candidate">
</div>
<input type="range" min="0" max="100" value="50" id="slider" />

<style>
  .cmp { position: relative; width: min(800px, 90vw); aspect-ratio: 4 / 3; }
  .cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .cmp img.top { clip-path: inset(0 0 0 calc(var(--split, 50%) )); }
  #slider { width: min(800px, 90vw); margin-top: 8px; }
</style>
<script>
  slider.addEventListener('input', (e) => {
    document.querySelector('.cmp img.top').style.setProperty('--split', e.target.value + '%');
  });
  slider.dispatchEvent(new Event('input'));
<\/script>

付録 B: 視認テスト用テクスチャの例

• グラデーション（水平/放射）
• 細線グリッド（赤/青/黒のサブピクセル感が出るもの）
• 肌・空・木々・髪の毛・織り模様
• 文字/ロゴ（エッジ硬め）

これらの「破綻が出やすい」素材を 1 セット化しておくと、毎回の判断が速くなります。