画像ディザ
Floyd-Steinberg 誤差拡散で写真をレトロなディザパターンに量子化——100% ブラウザ内で完結。
ソース
画像をここにドロップ
またはクリックして選択
オプション
画像ディザとは
ディザは、少数の固定色しか再現できないデバイスで連続階調画像を表示するための技術です。各ピクセルを単に最近傍の使用可能な階調に丸める(これは厳しいバンディングと詳細の損失を生む)代わりに、ディザリングアルゴリズムは丸め誤差を隣接ピクセルに拡散します。結果として明暗のドットからなるきめ細かい散乱パターンが生まれ、通常の距離から見ると目がそれを滑らかなグラデーションに再混合します。古典的な用途はグレースケール写真を新聞印刷用の純白黒に変換することですが、同じ原理は任意の小さなパレットで機能します。
本ツールは最も人気のあるディザリングアルゴリズムである Floyd-Steinberg を完全にブラウザ内で適用します。画像をアップロードし、希望するグレースケール階調数(2・4・8・16)を選ぶと、ツールは Canvas API で生ピクセルバッファを読み取り、画像を輝度に変換し、走査順に各ピクセルを巡回して最近傍階調に量子化し、差分を隣接ピクセルに拡散します。何もアップロードされず、結果はほぼ瞬時に得られます。
Floyd-Steinberg フィルタの仕組み
本ツールは裏側で Canvas 2D API を使用します。ソース画像がオフスクリーンキャンバスに描かれ、getImageData が生ピクセルバッファを返します。画像はまず標準的な 0.299·R + 0.587·G + 0.114·B 重み付けでグレースケール輝度バッファに変換されます。次にアルゴリズムが走査線順にバッファを反復します。各ピクセルについて、最近傍の許可階調を round(輝度 / step) × step(step = 255 / (階調数 − 1))として見つけ、その値でピクセルを置き換えます。
重要なステップは、古い値と新しい値の差、すなわち量子化誤差をどう扱うかです。Floyd-Steinberg は固定カーネルを使ってこの誤差を未処理の 4 つの隣接ピクセルに分配します:右に 7/16、左下に 3/16、真下に 5/16、右下に 1/16。誤差を前方に伝えることで、アルゴリズムは各領域の平均輝度を保持します。これこそが 2 階調画像が高コントラストのスタンプではなく滑らかな写真のように見える理由です。色数セレクタがグレースケール階調数を設定します:2 は純白黒で最も強いレトロ感を与え、16 はディザがほとんど見えないほど十分な階調を保持します。
ディザと他の量子化効果の比較
ディザリングはパレット削減効果のいくつかと関連しますが、区別されます。ポスタライズも階調数を減らしますが、各ピクセルを独立して丸めるだけで、ある階調から次へジャンプする箇所に目に見えるバンディングを生みます。ディザリングはそれらのバンドを目が平均化する細かいノイズに分割します。ハーフトーンは規則的なグリッド上に様々なサイズの丸いドットを使って階調をシミュレートし、印刷インクの感覚を呼び起こします。一方ディザリングは個々のピクセルを散らし、より細かくデジタルなテクスチャを生みます。閾値は誤差拡散なしの硬い白黒に変換し、固定カットオフより上は白、下は黒になります。線画には有用ですが、すべてのグラデーション情報を捨てます。
Floyd-Steinberg ディザリングの特徴はその散らばったノイズパターンです:暗い領域は主に黒ピクセルで埋まり、明るい領域は主に白ピクセルで、中間調はグレーをシミュレートする均一な斑点を得ます。これにより、小さなパレットでできるだけ多くの写真の詳細を保持したい場合に正しい選択となります。
ディザを使う場面
ディザリングは技術的・スタイル的用途の両方にまたがる多目的な効果です。一般的なシナリオは以下の通りです:
- レトロ・ピクセルアート。2 階調ディザ写真は初期のホームコンピュータ、ゲームボーイ画面、1ビット新聞印刷を瞬時に思い起こさせます。
- 限色デバイスでの印刷。プリンタやプロッタが黒インクしか置けない場合、ディザリングでグレースケール写真を忠実に再現できます。
- 電子インク・低位深ディスプレイ。電子書籍リーダーなどのデバイスは、2・4階調スクリーンでバンディングするグラデーションを平滑化するためにディザリングの恩恵を受けます。
- スタイル化グラフィック。4・8階調で、純白黒よりも多くの詳細を保ちつつ、グリット感のあるコミック・ノワールな外観を得られます。
- ファイルサイズ削減。2階調ディザ画像は PNG として非常に良く圧縮され、小さく保つ必要があるアイコン・マスク・テクスチャに最適です。
小さなパレットで写真画像を扱う必要がある時、あるいは意図的にレトロなテクスチャが欲しい時はいつでも、ディザリングが最速の道です。
画像にディザを適用する方法
画像のディザリングは数秒で完了し、すべてローカルにブラウザ内で行われます——アップロードなし、サインアップなし、透かしなし。以下の手順に従ってください:
- 画像をアップロード。アップロードエリアをクリックするか、JPG・PNG・WebP・GIF・BMPファイルをドラッグします。画像は即座にデコードされてプレビューされます。
- 色数を選択。純白黒なら 2、スタイル化された外観なら 4 または 8、元画像に近い繊細な結果なら 16 を選びます。
- 出力形式を選択。2 階調画像には PNG が最適(ロスレス)、より小さい写真には JPG、サイズと品質のバランスには WebP を選びます。
- 「ディザを適用」をクリック。ツールが画像を処理し、元と結果のファイルサイズを並べて表示します。
- 結果をダウンロード。「ディザ画像をダウンロード」をクリックして保存します。元ファイルは変更されません。
すべてのステップは JavaScript でローカルに実行されるため、画像がサーバーに送信されることはありません。これによりツールは完全にプライベートで高速、機密资料にも適しています。
このディザツールは無料ですか?
はい、完全に無料で、サインアップ・透かし・制限はありません。
どの色数を使うべきですか?
最も強いレトロな 1 ビット外観には 2 を使います。4 または 8 でスタイル化を保ちつつより多くの詳細を、16 で元に近い繊細な結果を得られます。
どのディザリングアルゴリズムを使っていますか?
Floyd-Steinberg 誤差拡散、最も一般的なディザリングアルゴリズムです。各ピクセルの量子化誤差を右、左下、真下、右下の隣接ピクセルに拡散します。
画像はアップロードされますか?
いいえ。すべての処理はローカルです。画像がブラウザから出ることはありません。