ブログ画像をディザリング処理する方法
原題: My Images Are Dithered
なぜ重要か
低帯域・低消費電力なウェブ設計への関心が高まる中、印刷技術を応用した画像軽量化の手法が個人開発者レベルで実装・共有される動きが注目される。
個人ブログ「dead.garden」の運営者Joが2026年7月6日、自サイトのピンク色画像にディザリング処理を施す手法を公開した。印刷技術のAMグリッド(振幅変調ドット)を模倣し、限られたパレットで視覚的な深みを表現する独自の方法を、実際のコードとともに解説している。
個人ブログ「dead.garden」を運営するJoは、自サイトに掲載する画像へのディザリング処理の手法を詳細に公開した。
Joがめざしたのは「印刷物らしい見た目」の再現だ。スクリーン上のピクセルはRGB各チャンネルで輝度を可変設定できるが、印刷では限られたインク色の組み合わせで多色を表現する必要がある。その手法として、AM(振幅変調)グリッド、FM(周波数変調)グリッド、ハイブリッドグリッドの3種類を紹介している。AMグリッドは暗い部分ほどドットが大きくなり、FMグリッドはドットの密度で濃淡を表現する。
今回採用したのはAMグリッドを模したアプローチで、画像パレットをモノクロとピンクの2色に限定し、大きめのドットパターンで印刷風の質感を表現した。過去の手法との違いとして、ドットサイズや色設定を変更したことが挙げられている。
なお、Joはこの手法がファイルサイズ削減を主目的とするものではないと明記している。Low Tech Magazineなどのサイトはディザリングによる色数削減でページの軽量化を実現しているが、今回の実験は場合によってはファイルサイズが増加することもあり、あくまで審美的な遊びとして位置づけている。
また、AMグリッド印刷では複数色のドットが干渉してモアレ縞が生じる問題があり、これを防ぐためにDIN 16547という規格が色ごとのドット配置角度を規定していることも説明している。FMグリッドはランダム配置のためモアレが発生しにくい。
この投稿はHacker Newsにも取り上げられ、「これはディザリングと呼べるか」という議論が起きた。Joはウィキペディアを引用し、ディザリングとハーフトーンは印刷分野では同義に使われる場合があると説明している。処理に用いたコードはすべて記事内に掲載されている。