私の画像はディザリングされています

私の画像はディザリングされています 2026年7月6日 (20:57) Jo ❤️ プレーンテキストで読む ディザリングについてはあまり詳しくないのですが、他の人のサイトでクールな方法で画像がディザリングされているのを見ると、いつもどうやっているのか不思議に思います。そこで、もし誰かが不思議に思っているなら、これが私の現在のピンク色の画像をディザリングする方法です。 編集: 自分のことを知りすぎているかのようですが、写真は今ではこのように見えます。 これは投稿でカバーされています。 ディザリングは、画像を（専門的に言えば）めちゃくちゃクールに見せるだけでなく、ファイルサイズを削減し（詳細を維持しながら色数を減らすことで）、それによって必要なストレージ（削減された画像のみを使用する場合）とクライアント向けのウェブサイトの重量を減らすことができます。そのため、例えばLow Tech Magazineのようなサイトがそれを使用しています。 ピンク色の画像のアイデアは、以前の投稿から来ました。その時、以前にこれを試しました。投稿「色を使わないデザイン」は、現在のデザインのアイデアを紹介しています。ここでは、色を強調のためにのみ使用して、一種の白黒の「印刷された」雰囲気を出すことを試みています。（これは、私のようなライトモードユーザーにのみ意味があります）。当時の画像は、古い方法ではこのようになりました。 ここでの主な違いは、画像のパレットを真のモノクローム、つまり黒とこのピンクに限定したことです。また、奇妙な「ディザリング」されたドットははるかに大きいです。 これは何ですか？ 私の目標は、印刷された画像を模倣することでした。画面上の個々のピクセルは、赤、緑、青の可変値を設定するという贅沢を持つことができますが、それは画面上の繰り返しRGBライトのグリッドが異なる強度で光ることを意味します。紙（およびその他の印刷基材）では、物事は少し異なって機能します。プリンターが扱っている限られた色のパレットで、より多くの色を錯覚させるには、ドットのグリッド/マトリックスを使用する必要があります。これには、AM、FM、ハイブリッドグリッドの3つの方法があります。ここでの振幅はドットのサイズであり、周波数は、まあ…周波​​数です。 AMグリッドで暗いスポットを作るということは、大きなドットを意味し、FMグリッドではたくさんのドットがあります。 上はFMプリントを示しています：ドットは混沌として見えます。 下はAMを示しています：すべてのドットは予測可能なパターンで表示され、明るいスポットはより小さなドットを持っています。 振幅変調ドットの問題は、この問題に無造作に取り組むと、画像に望ましくないパターン、いわゆるモアレが発生することです。 このため、AMプリントで色が互いに邪魔にならないように、色をどのようにオフセットするかについてルール（DIN 16547）があります。 FMグリッドはランダムなので、この問題は発生しません。 デジタル画像でAMパターンをシミュレートする 私はコマンドライン経由でサーバーにアクセスするため、コマンドラインツールを使用して画像をすばやく編集します。ツールはimagemagickと呼ばれ、「convert」コマンドを使用して呼び出されます。 この錯覚を作成する方法はオンラインで見つけました（リンクが見つかりません）ので、それを少し適応させました。したがって、個々の引数がそれぞれ何をするのかについて専門家であるとは主張できませんが、説明しようとします。 convert "oldfile" -resize 800 -set option:distort:viewport '%wx%h+0+0' \ -colorspace CMYK -separate null: \ \( -size 2x2 xc: \( +clone -negate \) \ +append \( +clone -negate \) -append \) \ -virtual-pixel tile -filter gaussian \ \( +clone -distort SRT 2,0 \) +swap \ \( +clone -distort SRT 2,15 \) +swap \ \( +clone -distort SRT 2,45 \) +swap \ \( +clone -distort SRT 2,75 \) +swap +delete \ -compose Overlay -layers composite -set colorspace CMYK -combine \ "newfile" これは一般的に何をするかというと：画像を幅800pxにリサイズし（誰がそれ以上必要とするでしょうか？）、色をCMYKに設定し、回転によって残った空きスペースを埋める背景を適用し（ガウシアンぼかしを適用してノイズをフィルタリングします）、色に分割し、それらを少し（より大きなドットのために）スケーリングし、歪ませ（この場合：回転させ）、最後に4つの画像を再び1つに結合します。 このコマンドを元のファイルで実行して生成される画像は次のようになります。 結合する前に、これらは個々の色のドットグリッドです。 これはCを0度、Mを15度などに設定します。しかし、どうでもいいです。 ズームイン、ズームアウトしても、奇妙なアーティファクトは現れないので、十分です。 ドットのサイズを馬鹿げた程度（8x8）に増やすと、何が起こっているのかをよりよく見ることができます。 編集: CMYKへの完璧なルート 一晩寝て、投稿を読み返すと、AMグリッドで真のCMYK色に限定された写真の解決策が明らかになりました。 後で説明する理由から、これはファイルサイズを削減する良い方法ではありません（色を制限して画像を幅800pxにリサイズすることは常にサイズを削減しますが、それ以外はすべてその目標に対して積み重ねられています）。しかし、それはクールに見えます。 上記のメソッドでは、ドットのサイズは変化しません。なぜそうするべきなのでしょうか？ すでに議論したように、デジタル画像（GIFまたはPNG-8の状況がない限り）は、ピクセルごとにRGBの異なる光強度を与えることができます。したがって、上の大きな画像を見ると、一部の正方形が他の正方形よりも暗いことがはっきりとわかります。真の模倣のためには、これはうまくいきません！ 必要なのは、結合する前に各チャンネルの色を2色に制限することだけです。これは明白なことです。 元のコマンドを取得した人がこれをしなかった理由がわかりません。 convert "oldfile" -resize 800 -set option:distort:viewport '%wx%h+0+0' \ -colorspace CMYK -separate null: \ \( -size 2x2 xc: \( +clone -negate \) \ +append \( +clone -negate \) -append \) \ -virtual-pixel tile -filter gaussian \ \( +clone -distort SRT 2,0 \) +swap \ \( +clone -distort SRT 2,15 \) +swap \ \( +clone -distort SRT 2,45 \) +swap \ \( +clone -distort SRT 2,75 \) +swap +delete \ -compose Overlay -layers composite -colors 2 -set colorspace CMYK -combine \ "newfile" これは、次のような画像を作成します。 回想すると、ピンクの代わりにこのような画像を試してみるかもしれないと思います。 もし私がグリッドの全体的な雰囲気を求めているだけなら、ピンクで十分です。 しかし、それはより多くの色（ピンクの色合い）を持っていますが、より少ない色（実際に有用な区別できるもの）で。 自分のくだらないアイデアについてブログを書くことが役に立たないと言ったのは誰ですか？ ピンク — 古い方法 古い方法のスクリプトでは、-distort SRT の値は「2（回転）」に設定されていました。これは、色を2にスケーリングして、より大きなドットを作成することを意味します。 上記のスクリプトを実行した後、カラー空間は再びグレースケールに変換され、その後、色はモノクローム、つまり黒とこのピンクにレベル調整されました。 試したい人のための全体のコマンドです。 convert "oldfile" -resize 800 -set option:distort:viewport '%wx%h+0+0' \ -colorspace CMYK -separate null: \ \( -size 2x2 xc: \( +clone -negate \) \ +append \( +clone -negate \) -append \) \ -virtual-pixel tile -filter gaussian \ \( +clone -distort SRT 2,0 \) +swap \ \( +clone -distort SRT 2,15 \) +swap \ \( +clone -distort SRT 2,45 \) +swap \ \( +clone -distort SRT 2,75 \) +swap +delete \ -compose Overlay -layers composite -set colorspace CMYK -combine \ -colorspace Gray -colors 2 +level-colors black,#A2719B \ "newfile" レベル調整の前後の画像にズームインすると、ドットはサイズが変化しているように見えます。 詳細をよりよく表示するために、-resize フラグを省略しました。 完全に正確ではありませんが、この方法が画像から最も印刷されたような感触を得られると思います。 残念ながら、ドットが拡大されていなくても、かなりの詳細を失う可能性があります。 そのため、しばらくしてこれを断念しました（また、それを見るのにうんざりしました）。 編集: 今、本物と比較してください。 ピンク – 新しい方法 モノクロームはクールなアイデアですが、ブログ（およびウェブサイトの他の写真）には限定的な用途しかありません。 もう少し深みが必要です。 必要なのは、より多くのピンクの色合いです。 これらは、-remap フラグを利用することで取得します。 convert "oldfile" -resize 800 -set option:distort:viewport '%wx%h+0+0' \ -colorspace CMYK -separate null: \ \( -size 2x2 xc: \( +clone -negate \) \ +append \( +clone -negate \) -append \) \ -virtual-pixel tile -filter gaussian \ \( +clone -distort SRT 1,0 \) +swap \ \( +clone -distort SRT 1,15 \) +swap \ \( +clone -distort SRT 1,45 \) +swap \ \( +clone -distort SRT 1,75 \) +swap +delete \ -compose Overlay -layers composite -set colorspace CMYK -combin