HN21273
レトロな質感を再現！画像にディザリングを適用する方法を解説
How My Images Are Dithered
surprisetalk・4日前
議論
11件この記事では、私の画像にディザリング（Dithering）を適用する方法について解説します。ディザリングとは、限られた色数で中間色を表現するための手法で、あえてドット感を出したいデザインやレトロなグラフィックを作成する際に非常に有効です。具体的な実装手順やアルゴリズムの仕組みについて深掘りしていきます。
まあディザリングの一種だとは思うけど、実際にはこれハーフトーン（網点）だね。
もしTシャツ用のカスタムDTF（Direct to Film）プリント目的でハーフトーン処理をするなら、このツールが役立つかもよ。
これは画像の一部を「ノックアウト」、つまりデジタル画像上で透明にして、最終的なフィルムに残らないようにするもの。これによってTシャツ表面のフィルム面積が減るから、通気性と柔軟性が良くなるんだ。
この作業が必要だって知る前にDTFプリントを作っちゃったことがあるんだけど、ネット上のチュートリアルは手順が多くて面倒だったから、次は楽できるようにこれを作ってみた。まだ実戦テストはしてないけどね。
タイトルの「How」が抜けてない？「How My Images Are Dithered（私の画像がどうディザリングされるか）」って意味だと思う。
ディザリングでファイルサイズを削減できる
確かにPNGやGIFみたいな可逆圧縮を使っているなら、非可逆なステップを加えてパレットの色数を減らすのは有効かもね。
写真の圧縮ならJPEGかWebPを使うべきだよ。
経験則で言うと、圧縮効率は通常JPEGがディザリングに勝つし、WebPなら常に勝つ。ディザリングを使うのは構わないけど、あくまで美学のためだってことは認めてほしいな。WebPはブラウザのサポートが非常に広いし、圧縮という点ではディザリングを完全に圧倒してる。「色数を減らす」なんて手法で長年蓄積された研究と最適化に勝てるわけがないんだ。
「FMVが使えないシステムで、どうやってSonicのゲームにフルモーションビデオを実現したか」っていうYouTube動画を見たことがあるけど、回答は「低解像度にして、カラーパレットを減らして、フレームレートを落として、インターレース処理をした」みたいな内容だった。それは不可能を可能にしたんじゃなくて、レゴブロックのバケツだけでピラミッドを建てたと言ってるようなもんだよ！同じピラミッドじゃないだろ！誰でも解像度を下げればそれらしく見える。実際にアーティファクトを出さずにデータを圧縮するコーデックを作るには、努力とチームワークが必要なんだ。
前の仕事でグラビア印刷のオペレーターをしていたから、この記事を見て少し懐かしくなったよ。凹版印刷では静電気アシストでインクがセルから引き出されるから、色がより混ざり合って、こういうパターンは見えにくいんだ。どちらかと言えば現像した写真に近い。主に思い出されるのは、見習い期間の修了試験でオフセット印刷をやった時のことかな。
扱っていた紙は約3.5メートル幅で、1ロールの長さは2〜3キロ、それを20〜30分で流し切る。このプロセスは高速で高品質だから、『PlayBoy』とかIKEAのカタログを各言語版で刷ってたな（言語が変わるときは黒のシリンダーを交換するだけ。データはテキストがほぼ単色の黒になるように最適化されてたからね）。IKEAのカタログを約4,000万部印刷するのに2ヶ月くらいかかった。頭がぼーっとする作業だったけど、同時にすごく禅のような感覚でもあった。時々懐かしくなるよ。
うわ、めちゃくちゃいいね！でも他の人が言ってる通り、これはハーフトーンに近いと思う。画像をディザリングしたりピクセル化したいなら、Image-to-Pixel [0] を使うのがいいよ。
Didder[0]はディザリングに優れたツールだよ。自分は6色電子ペーパーディスプレイ用の画像プリプロセスに使ってる。
フロイド・スタインバーグ法[1]みたいに、ディザリングアルゴリズムの沼に深く潜り込むこともできるよ。
[0] https://github.com/makew0rld/didder
[1] https://en.wikipedia.org/wiki/Floyd%E2%80%93Steinberg_dithering
数年前にこんなお遊びアプリを作ったよ https://dithering-sigma.vercel.app/ 誰かの役に立てば面白いかなと思って。ソースコードはこちら https://github.com/zeraye/dithering
20年近く前、Rasterbatorっていうソフトを使って画像をドット化し、A4用紙数枚に拡大して壁一面に飾ったことがある。近くで見るといろんなサイズの円だけど、離れると画像が浮かび上がるんだ。最高にクールだったよ。寮の壁に飼い犬の写真を飾るのに使ってた。
編集：見つけた。アップで撮った写真と、ソフト上で複数ページに配置した全体の画像だよ https://imgur.com/a/OeaIWuY
いいね！記事にあるフロイド・スタインバーグ法の実装がすごく気に入ったから、ブラウザで使えるツールを探したら、ここで言及されてるツールを見つけたよ：https://www.ascii-magic.com/styles/dither
面白いアニメーションオプションや設定があって遊べるし、他にもいろんなディザリングアルゴリズムが試せるよ。