比較しやすい元画像を用意する
ファイル選択、ドロップ、貼り付けから始めます。球のサンプルは階調、色付きの構成はパレットの確認に便利です。入力上限は60 MB、展開後6400万画素です。アニメーション形式も静止画として処理します。複雑な写真で多くの設定を同時に変える前に、単純なグラデーションで傾向を見てみましょう。
画像をディザリング
画像をディザリングして、少ない色の画素を並べて濃淡を表現できます。誤差拡散と規則的な模様を比較し、ピクセルサイズを調整してPNGで保存。処理は端末内、無料で登録不要です。
ここにドロップ、または Ctrl/Cmd+V で貼り付け無料・登録不要・端末内で処理
元画像
仕上がり
ドラッグして比較
サンプルで試す
調整
ディザリング画像で中間色を表す仕組み
ディザリング画像は白と黒だけでも、隣り合う画素の割合を変えれば灰色のように見えます。実際に灰色の画素を保存するのではなく、周囲の画素が視覚的に混ざる性質を使います。ディザリング画像は同じ2色でも、規則的なマトリクス、誤差拡散、単純なしきい値では読みやすさや模様の印象が違います。色数と点の並びを、別々の選択として考えましょう。
まずピクセルサイズに合わせて元画像をブロック化し、平均色を求めます。明るさ、コントラスト、ガンマを適用してからパレット色へ割り当てます。元の透明部分は白に合成するため、完成するPNGは不透明です。色の量子化を行う機能であり、透過マスクの保存ではありません。アルファを実点に変えたい場合はDTFツールを使います。
誤差拡散では、現在の色と選んだ色の差を、まだ処理していない隣の画素へ渡します。途中の値はFloat32に保持し、誤差の小数部分を最後まで扱います。色の距離は2ΔR² + 4ΔG² + 3ΔB²で比べ、緑の差を強く評価します。これは重み付きRGBで、知覚色空間への変換や印刷の色管理を行うものではありません。
ディザリングのやり方：画像から保存まで
模様より先に色を決める
白黒、グレー4階調、Game Boy、CGA、PICO-8、Mac Classicを選べます。自作は2〜16色、自動抽出は2〜64色です。まず明暗や色相に必要な差があるかを確認します。似た色ばかりのパレットでは、アルゴリズムを変えても大きな階調差は表現できません。出力は必ず選択したパレットの色になります。
条件をそろえて比較する
同じパレットとピクセルサイズでFloyd–Steinberg、Atkinson、Bayerを比べます。模様の差が分かったあと、重要な部分がつぶれる場合に色調を調整します。誤差拡散では強さを下げたり、行ごとの反転を止めたりできます。これらを使わない方式では表示されないので、無関係な設定に時間を使う必要はありません。
必要なピクセル寸法で保存する
小さなドット絵素材には、縮小したマス目を1:1で出力します。元画像の配置寸法が必要なら、最近傍法で元サイズへ戻します。PNGはJPGのような非可逆圧縮を使いません。後のアプリで滑らかに拡大縮小すると、パレット以外の色が混ざり、四角い境界も変わるため、保存した寸法を確認してください。
ディザリング処理の方式とパレット
ディザリング処理の初期設定はFloyd–Steinbergで、4か所へ誤差を配ります。Atkinsonは6か所を使いますが、渡す誤差は4分の3で、明暗の残り方にも違いが出ます。Jarvis–Judice–NinkeとStuckiは広い近傍、Burkesは2行を使います。Sierra、Sierra Two-row、Sierra Liteも選べます。単一フィルターの強弱ではなく、誤差を渡す位置と重みが異なる方式です。
拡散の強さは0〜100%です。ゼロでは誤差を隣へ渡さず、そのまま最も近いパレット色を選びます。走査方向を行ごとに反転すると、配分する位置も左右反転します。これらは誤差拡散だけに効く設定です。Bayer、しきい値、ランダムには表示せず、実際には変化しない操作をできるように見せていません。
Bayerは2×2、4×4、8×8の再帰的なしきい値行列です。小さな行列は繰り返しが目立ち、大きなものは1周期内に多くの位置を持ちます。しきい値方式はディザを追加しません。ランダムノイズは再現可能な擬似乱数で選色を揺らすため、再計算のたびにまったく別の模様へ変わりません。どの方式でも、保存色はパレットの範囲内です。
自動パレットは長辺256 px以下の元画像コピーを中位切分で処理し、画像と指定色数ごとに結果を保持します。明るさや方式を変えても再抽出しないので、同じ色で比較できます。色数を変えると別の抽出になります。元画像の固有色が少なければ、指定より少ない色数になる場合があります。自作パレットは選色、追加、削除で調整できます。
ディザリングでドット絵を作るときの色選び
Floyd–Steinberg方式
白黒2色、ピクセルサイズ3 px、誤差拡散の強さ100%、蛇行走査。
Atkinson方式
白黒2色、ピクセルサイズ3 px、誤差拡散の設定100%、蛇行走査。
Bayer 8×8方式
白黒2色、ピクセルサイズ3 px、8×8のBayer行列による規則的な配置。
Game Boyパレット
陰影のある球をFloyd–Steinberg方式で緑4色に変換。ピクセルサイズ4 px、誤差拡散の強さ100%、蛇行走査。
ディザリングで白黒のドット絵を作るときは、輪郭だけでなく広い平坦な場所を見ます。誤差拡散が平均の明るさを保っていても、細かい模様が視覚的に忙しすぎることがあります。しきい値は強いシルエットを作れますが、柔らかな影を失います。階調を残したいのか、はっきりした面を作りたいのかで選び、すべての写真に同じ方式を当てはめないようにしましょう。
古いゲームの雰囲気を作るパレットは、見た目の制約であってハードウェアの再現ではありません。Game Boyは4色の緑、CGAは1組の4色、PICO-8は指定の16色、Mac Classicは白黒です。画面寸法、スプライト数、実機用形式を自動で守る機能はありません。実際のゲーム制作に使う場合は、その制約を別途確かめます。
ドット絵の練習ではピクセルサイズを大きくし、先に形を整理すると模様を判断しやすくなります。1600×1200の元画像をサイズ4にすると、1:1保存は400×300です。割り切れない辺では最後のブロックが残りの画素を受け持ちます。元寸法へ戻す場合も最近傍で対応付け、平滑化で中間色を追加する工程はありません。
限られた色の図案で物体同士が同色になったら、方式を次々変える前にパレットを見直します。区別できる色を1つ加えるか、自動抽出を試すほうが直接的な場合があります。複数の画像で同じ配色を使いたいなら、共通の自作パレットにします。自動抽出は画像ごとに異なり、別々のファイルで同じ色を保証しません。
ディザリング処理とデスクトップ編集の違い
Photoshopには写真補正やインデックスカラーの制作工程があり、Illustratorはベクター描画と配置を得意とします。このページは量子化方式の比較とパレット選択、画素を保ったPNG保存に絞っています。ベクターパスやレイヤー付きの工程ファイルは生成しません。結果を素材として、文字やほかの図形を含む制作へつなげてください。
小さな1:1画像は明確なマス目で編集するアプリに、元寸法の出力は既存のレイアウトに合わせる用途に向きます。どちらも後で平滑化すると色が増える可能性があります。画面表示も整数倍でないズームでは色が混ざって見えるので、画素の確認には整数倍の拡大を使い、縮小サムネイルだけで判断しないでください。
プレビューは長辺1000 px以下で、変更が止まって80 ms後に更新します。誤差拡散は格子と先行する選色に依存するため、縮小プレビューと最終出力の点位は一致しません。保存時に元画像から計算し直します。画像は端末から送られず、表示時間も直前のプレビュー計算を示すだけで、一定速度の約束ではありません。
ディザリング画像のよくある質問
画像を読み込み、パレットとディザリング方式を選び、結果をPNGで保存します。ピクセルサイズを変えると、細かい質感にも大きなドット表現にも調整できます。保存前に元画像と見比べてみてください。PNGに入るのは選んだパレットの色だけです。白黒パレットなら画素は白か黒になり、灰色の画素は入りません。
写真の滑らかな階調にはFloyd–Steinberg、明部をすっきり見せるならAtkinson、規則的な模様にはBayer、輪郭のはっきりした図形にはThresholdが向いています。Atkinsonは誤差の4分の3を拡散し、コントラストが強い昔のMac風の表現になります。Bayerは安定した格子模様でレトロな質感を出せます。Thresholdはディザリングを加えません。同じパレットとピクセルサイズで比較すると違いが分かりやすくなります。
Atkinsonは量子化誤差の4分の3を配り、Floyd–Steinbergは画像境界を除き、核の中で全体を配ります。点位だけでなく明暗の傾向も変わります。同じ元画像、パレット、サイズで比較してから、必要に応じて明るさを調整してください。
2〜16色です。色選択で各色を変更し、追加や削除もできます。色の照合は重み付きRGB距離です。近い色ばかりを増やしても、物体の区別が改善するとは限りません。明るさと色相の違いを持たせた構成を確認してください。
プレビューの長辺は1000 pxまでですが、保存時は出力寸法で再計算します。誤差拡散は格子と累積する誤差に依存するため、解像度が変わると点位も変わります。プレビューでは雰囲気を選び、最終的な並びはダウンロードしたPNGで確かめてください。
処理はブラウザー内で行い、通常はWorkerを使います。使えない場合は主スレッドで行ごとに分割して処理します。利用統計は画像やファイル名を含みません。サンプルを開くと静的な画像を取得しますが、選んだローカル画像をアップロードする通信ではありません。
サンプル画像でディザリングを無料体験
ディザリングツールをサンプルで試し、色を決めてから誤差拡散と規則的な行列を比較してください。小さな1:1画像か元寸法のPNGかを選び、自分の素材へ進みます。元画像とパレット、ピクセルサイズを残すと、ほかの素材でも同じ方針を使えます。