PNGインデックスカラー＆ディザリング徹底ガイド
スクリーンショットやUIはインデックスカラーPNGで大きく軽くできます。鍵は適切な色数とディザリングの選択。ここでは最小サイズを狙うための 実務フローとレシピをまとめます。
関連ガイド
要点（TL;DR）
- 色数は128 → 96 → 64の順で削り、画質が保てる最小に。
- ディザはUI=Ordered（Bayer）、写真/グラデ=Floyd–Steinberg/Sierra。
- アルファは必要なら二値化。段差が目立つならWebPロスレスも比較。
- sRGBで色管理を統一、余計なメタ（gAMA/EXIF）はstrip。
1. パレット設計の基本
- 目安：64〜128色から開始（多くのUI/スクショで妥当）。足りなければ段階的に増やす。
- 1/2/4/8bit：ビット深度が低いほど軽いが帯域が粗くなる。UIは4〜8bitが現実的。
- 透過は二値化（しきい値）を検討。半透明が必要ならWebPロスレスも候補に。
2. ディザリングの選び方
| 手法 | 特徴 | 向き/不向き |
|---|---|---|
| Floyd–Steinberg（FS） | 自然で粒子が細かい | 写真/グラデ向き・UIの線画は若干粗く見えることも |
| Ordered（Bayer） | 規則的で滲みにくい | UI/線画向き・写真ではパターン感が出やすい |
| Sierra / Atkinson | FS系の変種。やや粗い粒子感 | レトロ/ドット感を残したいとき |
3. CLIレシピ（pngquant / oxipng）
# pngquant：色数とディザを調整 pngquant --quality=65-95 --speed=1 --strip --force --output out.png -- 128 in.png # ディザを弱める（値が小さいほど弱い） pngquant --floyd=0.3 --strip --force --output out.png -- 96 in.png # oxipng：最終の強圧縮（インプレース） oxipng -o max --strip all -Z in.png
pngquant は --floyd でディザ強度を調整、--quality で最低品質を担保。oxipng はメタ削除と圧縮を担当（インプレース）。履歴管理中は別パスに退避してから実行しましょう。
4. ワークフロー（最小サイズまでの流れ）
- 128色で出力 → 96 → 64と下げて視認差が出ない最小値を探す。
- UIはOrdered、写真/グラデはFS/Sierraを優先し、必要に応じて強度を弱める。
- 透過縁の段差や滲みを確認。問題が続くなら 透過フリンジ対策 を適用、またはWebPロスレス比較。
- 最終は
oxipngで圧縮、sRGB固定・余計なメタの除去を確認。
5. よくある落とし穴と対策
- 色数を下げすぎて帯域が目立つ → 8〜16色増やすか、ディザを切替/弱める。
- ガンマ/EXIF残存で色が変わる →
--stripを徹底。 - 半透明が多く段差/にじみ → アルファ二値化 or WebPロスレスへ。
- UI文字/線が滲む → Ordered系 or WebPロスレス、もしくはSVG化を検討。
6. 公開前チェック（8項目）
- 色数は128→96→64で検証し、最小サイズを採用。
- UI=Ordered、写真/グラデ=FS/Sierraで最適化。
- 透過縁の段差無し。必要ならWebPロスレスと比較。
- sRGBで色管理を統一、メタはstrip済み。
- 実表示幅どおりに配信（srcset/sizes）。
- CLSゼロ：
width/height明示、広告はプレースホルダで高さ確保。 - Before/After を /compare と /compressor で確認。
- 指紋（v2 等）でキャッシュ更新が担保されている。
7. まとめ：色数×ディザで“最小”を作る
少色パレットと適切なディザ選択だけで、スクショ/UIは大きく軽くできます。128→96→64色の順に試し、UI=Ordered／写真=FSを基本に最小サイズへ。難所は WebPロスレス と比較して最適解を選びましょう。