ディザ比較プロトコル：Dither Compare で再現性ある評価を行う
Dither Compare ツールは複数ディザ方式を横並びで評価し最小サイズと視認性バランスを取るための支援です。本稿は“見るべきポイント”を体系化し主観の属人化を防ぎます。
TL;DR
- UI/線画は Ordered(Bayer) を初期仮説
- 写真/グラデは Floyd–Steinberg or Sierra2
- 粒状感(Noise) / パターン感(Pattern) / 文字滲み(Text) の3観点で5段階主観採点
- 総合差が僅少→最小バイトの方式を採用
1. 評価指標シート例
image,category,method,size,colors,noise,pattern,text
ui-dashboard,ui,ordered,81234,128,5,1,5
ui-dashboard,ui,floyd,82310,128,4,2,4
grad-landscape,photo,floyd,60321,128,5,1,5
grad-landscape,photo,ordered,64440,128,4,3,4noise / pattern / text は 5=最良〜1=悪い。差が僅少ならサイズ優先。
1.5 自動採点スクリプト(簡易)
// scripts/dither-score.ts (簡易ダミー)
import fs from 'node:fs';
function subjectiveProxy(p: string){
// 実際は局所分散/エッジ数などで近似
return (p.includes('ordered')?1:0) + Math.random();
}
const rows = ['image,method,noise,pattern,text'];
for (const file of process.argv.slice(2)) {
const base = file.replace(/\\.png$/,'');
rows.push(base+',floyd,'+Math.random().toFixed(1)+','+Math.random().toFixed(1)+','+Math.random().toFixed(1));
}
console.log(rows.join('\n'));2. 観察チェックリスト
- 帯域階調: グラデ境界がリング状に強調されていないか
- 粒状感: 視認距離(等倍)で気になる粒子ノイズレベル
- パターン: 規則格子/斜め線が不自然に出現していないか
- 文字/線: シャープネス低下や滲み
- 色偏り: 量子化で特定色が過大代表されていないか
3. 手順
- カテゴリ別画像選定 (6〜10枚)
- 色数 128 を固定し方式違い出力
- 主観採点 + サイズ集計
- サイズ差 <3% かつ 主観差 1以下 → 軽い方
4. 失敗例
- 色数を方式間で変動 → 公平比較不能
- 主観指標未定義 → “なんとなく良さそう” の再現不可
- 1画像しか比較せず一般化
4.5 関連ツール
5. まとめ
標準化された観察シート + Dither Compare の可視化で、方式選定を“再現できる決定”に昇格させる。
公開日: 2025-09-06編集: gazou-compressor.jp
FAQ
FAQ（よくある質問）
1画像形式の基本方針は？（写真/スクショ/透過）
写真は AVIF / WebP（画質80–85%目安）、UIやスクショはPNG / WebP Lossless、単色ロゴはSVGが基本です。 実装の詳細は srcset/sizes設計ガイド と スクショ最適化 を参照してください。
2圧縮しても画質を落とさないコツは？
実表示幅に合わせたリサイズ → 過大ダウンロードを防ぎ、
srcset/sizes を 実描画幅に一致させます。画質は写真で 80–85% を起点に、ノイズやエッジを目視確認。 仕上げは /compare で Before/After を見比べるのがおすすめです。