デザイナーは知っておきたい！ ディザリング画像処理の仕組み・やり方を解説
Post on:2025年11月13日
sponsorsr
最近、ディザリングを施した画像をよく見かけ、人気が高まっているように感じます。
画像にディザリングを施すにはいくつかの方法がありますが、ディザリングとはいったい何なのか、ディザリングのやり方を紹介します。
@DanHollickのポストより
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、作者様にライセンスを得て翻訳しています。
「ディザリング（Dithering）」とはを説明する前に、そもそもデジタル画像にディザリングがなぜ必要だったのかをすこし説明しておこうと思います。
現在ではディザリングは美的効果として定着していますが、かつては人間の目を欺いて実際よりも多くの色を見せる目的でディザリングは必要でした。
左: バンディング、右: ディザリング
コンピュータの初期はメモリが不足していたため、画像に多くの色情報を保存することができませんでした。この問題を解決するために、ルックアップテーブルを用いた限定パレットや非常に低いビット深度（量子化）を用いて色数を削減して画像を作成していました。
メモリが少なかったので、画像の色数を削減
量子化で問題になる点は、段階的なグラデーションがあるべきところに急激なステップを生じてしまうことです。つまり中間色が存在しないのです。ここでディザリングが役立ちます。隣接する2つの色にノイズを加えることで、このグラデーションを近似することができます。
左: フルカラー、中: 量子化されたWebセーフカラー、右: 量子化されたWebセーフカラー＋ディザリング
ディザリングが効果を発揮するのは、空間平均化（spatial averaging）と呼ばれる現象によるものです。つまり、人間の目は小さな領域の色を平均化して認識します。ディザリングは人間の目にローパスフィルターのように2つの色領域の間に滑らかな段階を推測させることで、わたし達の目を欺きます。
左: フルカラー、中: 量子化されたWebセーフカラー、右: 量子化されたWebセーフカラー＋ディザリング
では、そのディザリングを画像に施すにはどうすればよいでしょうか？
いくつかの方法がありますが、まずはシンプルな方法である順序付きディザリングから始めましょう。
説明を簡単にするために、モノクロ画像を使用します。ここでの目標は画像内のグレーのトーンをブラックとホワイトだけで再現することです。
グレーのトーンをブラックとホワイトだけで再現
まずは、2x2のベイヤーマトリックスを作成します。このマトリックスの値はピクセル処理する順序を表します。次に、これらの値を必要な範囲（0-255）にスケーリングします。これにより、ピクセルを比較するための閾値マップが得られます。
2x2のベイヤーマトリックスを作成
次に、画像を2x2ピクセルのグループに分割し、各ピクセル値をマップ内の値と比較します。この際、奇妙な十字形の順序で処理します。マップ内の値よりも大きい場合はホワイトに、小さい場合はブラックに置換します。
ピクセルをホワイトとブラックに置換
2x2のマトリックスなので象限のパターンは5通りしかありません。つまり、ホワイトとブラックの間には3段階のグレーしか存在しません。閾値マップのサイズを大きくすると、グレーの有効な階調が増え、詳細レベルも上がります。
閾値マップのサイズを大きくする
順序付きディザリングの問題点は、閾値マップによって生成されるパターンがかなり目立つことです。より優れたアプローチは誤差拡散ディザリング（Error Diffusion Dithering）と呼ばれるもので、具体的にはフロイド・スタインバーグアルゴリズム（Floyd–Steinberg algorithm）です。
左: 順序付きディザリング、右: フロイド・スタインバーグ ディザリング
マップを使用する代わりに、128のような単一の閾値を設定します。以前と同様に、各ピクセルをこの閾値に対して評価します。今回は元の値と新しい値の差分（エラー）を取得し、その差分を周囲のピクセルに適用します。
各ピクセルをこの閾値に対して評価
このアイデアは、あるピクセルが元の画像より著しく明るい場合に隣接するピクセルを暗くして補正するというものです。このマトリックスに従って誤差を隣接ピクセルに加算することで、誤差を拡散させます。誤差は符号付きで、正または負の値を取ります。
誤差を拡散させる
ディザリングのアルゴリズムは実際には他にも数多くありますが、これの2つがもっとも一般的なものです。高ビット深度のカラーが普及した現在では、ディザリングはもはや必要とはされません。そのためディザリングは主にレトロな美的感覚を表現するために使用されます。
ディザリングのいろいろなアルゴリズム
これでディザリングの解説は終わりです。
ディザリング、ガウスぼかし、エッジ検出、ノイズなどのエフェクトについて興味がある人は、Making Softwareをご覧ください。
元ネタは、下記ポストより。
Before we all mute the word 'dithering' I thought I'd explain a little bit about why we needed to dither digital images in the first place.
Although it's an aesthetic now, we used to need dithering to trick our eyes into seeing more colors than were actually there. pic.twitter.com/HK0zzTnsYr
— Dan Hollick (@DanHollick) October 27, 2025
sponsors
