新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

gif(ジフ・ギフ)画像書き出しで使う「ディザ」とは何なのか

   

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

Webデザインにおいてgif(ジフ・ギフ)ファイルというのは非常に使用頻度の高い画像ファイルです。
通常の画像から透過gif、果てにはアニメーションgifなんていうのも作れてしまいます。

そんなgifについて今までしっかり調べていなかったことがあります。
それは「ディザ」。
gif画像にはディザありとディザなしがあって、いままではそんなにこだわらずに初期設定で保存していたのですが、
これの設定により画質が結構異なるようなのです。

ということで、今日は「ディザ」についてしっかり勉強してみようと思います。

スポンサーリンク
 

まずは「ディザ」という言葉の由来から辿って行きましょう。
ディザを英語で書くと「dither」となります。

ditherの意味 – 英和辞典 Weblio辞書

【動詞】 【自動詞】
1(心配・興奮などで)おろおろする,ためらう,うろたえる 〈about〉.
2〔…のことで〕うろたえる,おろおろする 〔about〕.
【名詞】
[a dither] うろたえ,ためらい,おろおろした状態.

残念ながらこれではよくわかりませんでした。
ということで、改めてWikipediaで調べてみると、

□ ディザ – Wikipedia

量子化誤差(端数)を、単純に丸めるのではなく、全体の量子化誤差が最小化するよう確率を調整して切り捨てまたは切り上げのどちらかをランダムにおこなうためによるゆらぎのことである。

ううむ。これでもいまいちピンときませんね。
「ゆらぎ」という表現がでてきましたが、ここが元の意味「おろおろする」「ためらう」などと繋がってきそうです。

続けます。

そのような一種のノイズ的データを追加する作業および技法はディザリング(Dithering)またはディザ法と呼ばれる。誤差を周囲のデータに拡散する手法をも含めて言うこともある。

「ノイズ」、「誤差」なんて言葉も出て来ました。
「ディザリング」という言葉もでてきましたが「あえて誤差を追加する手法」のようです。
ではなぜ誤差を生じさせる必要があるのでしょうか?

更にWikipediaにはこうあります。

ディザという言葉が最初に使われたのは第二次世界大戦の頃である。当時の爆撃機では、航法と爆撃の弾道を算出するうえで機械式の計算機が使用されていた。そういった(数百個の歯車などで満たされている箱としての)計算機は、奇妙なことに、地上で試された場合よりも飛行機上で用いられた場合の方がうまく機能した。これについて技術者が気づいたのは、固着した可動部に与えられた航空機の振動の刺激が(計算機の出力の)誤差を減らした、ということだった。-中略-(この発見にちなんで、)振動を発生させる小型のモーターが計算機に組み込まれるようになった。生成されるこの振動のことは、中期英語の “didderen”(震える)からとって “dither” と名づけられた。

「振動(ノイズ・誤差・ゆらぎ)」が加わる事でより正確に近づくという現象に気付き、
これをあえて加えることを言葉で表現したのが「ディザリング」、加えられた「振動(ノイズ・誤差・ゆらぎ)」が「ディザ」ということのことです。

ディザの意味がおおよそわかったところで、gif画像で言うディザとはなんなのか?

さらにWikipediaから、

コンピュータグラフィックスで使われる場合には、制限された色数でそれ以上の色調を表現する技法として使われる。

ああ、スッキリ。
ってか、最初からここだけ言及しておきゃ済んでたような気もします。

でも、それがなぜ誤差やゆらぎとつながるのか。
これ見てもらえればわかると思います。

赤と青で紫を表現しています。
gifの場合は色数を減らして軽量化しているのでこういったことが必要になってくるわけですね。
つまり、人間の目の特徴、いわゆる目の錯覚を「ゆらぎ」や「誤差」と表現し、それを利用するというとんでもない高等技術が「ディザ(ディザリング)」だったんですねぇ。。

これは使わない手はないです。

というところで実践編です。 
左の空のグラデーションを比較してみてください。

gifのディザ(ディザなし)
ディザなし

gifのディザ(誤差拡散法100%)
ディザあり(誤差拡散法100%)

明らかにディザありの方がグラデーションが綺麗に出ています。
拡大するともっとよく分かります。

ディザなし
ディザなし

誤差拡散法
ディザあり(誤差拡散法)

パターン
ディザあり(パターン)

ノイズ
ディザあり(ノイズ)

ディザにはいくつかの種類(誤差拡散法、ノイズ、パターン)がありますが容量とプレビューとを比較して最適なものを選んであげれば良いと思います。 

 - デザイン, 覚え書き

アドセンス広告メイン

Comment

  1. […] 参考リンク: gif(ジフ・ギフ)画像書き出しで使う「ディザ」とは何なのか […]

レアカードのWebデザイン日記 へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。

  関連記事

郊外ハブ駅の朝の通勤ラッシュ時の電車で必ず座れる方法

1年以上前の記事です。内容が古い可能性があります。皆さんは通勤電車で必ず座ろうと …

Yahoo! ジオプラスからのドメイン移管

1年以上前の記事です。内容が古い可能性があります。Yahoo!ジオプラスの無料ド …

Facebook(フェイスブック)で一度シェアした情報を書き換える方法

1年以上前の記事です。内容が古い可能性があります。先日、感動逸話をパクり、「いい …

no image
Yahoo!ブログにYoutube動画を埋め込む方法

1年以上前の記事です。内容が古い可能性があります。ライブドアブログが死んでいたと …

ツイッターでフォロワーの増える不思議な呪文 #followmeJP

1年以上前の記事です。内容が古い可能性があります。あまりオススメできないかもしれ …

ワンクリックアップデートでワードプレス終了。「更新の必要はありません この WordPress のデータベースはすでに最新のものです」と出て先へ進めなくなった時の対処法

1年以上前の記事です。内容が古い可能性があります。いや、ビックリしました。 これ …

Google日本語入力で快適フリック入力。「ああ」を「い」にしない設定

1年以上前の記事です。内容が古い可能性があります。どういう意味かというと、初期設 …

livedoor Blog(ライブドアブログ)で「記事をコピー」すると公開しちゃうゾ

1年以上前の記事です。内容が古い可能性があります。自分の場合、ブログを書くときは …

さくらインターネットでOpenPNE

1年以上前の記事です。内容が古い可能性があります。ステップサーバーではメールによ …

no image
Windows XPのメンテナンス

1年以上前の記事です。内容が古い可能性があります。過去に「Mac OS Xのメン …

血液型オヤジ