Featured Video Play Icon

【gif ディザ処理 とは?】GIFやPNG8画像をディザリングで極限まで軽くする方法(1ドット1バイトレベル)

Pocket

WEBページを表示するまで「8秒以上」待たされた時代がありました。

書き込み速度(ライト)、読み込み速度(リード)、が機器/回線ともに高速になった今では、WEBページ画像の重さを気に掛ける習慣が減っておりましたが、今回の世界的規模のコロナ被害により、同時刻に部屋でネットを利用する人々が増え、稀にページの表示に時間がかかる状況があります。

「いつ発生するかわからない緊急時」においても、広く公平に、WEBを問題なく閲覧できる環境を構築するために必要な「ネット回線にやさしい」軽量化/最適化された画像の作り方をアーカイブとして残します。


目次


画像容量の傾向

GIF/PNG8のインデックスカラー画像データは、原則ピクセル(ドット)配置が複雑化した分、データ容量は増えます。


よって、可能な限りベタな1色アニメ塗りを意識すれば、まず容量は軽くなります。


模様の違いによる画像容量比較

それでは様々な画像配置で比較してみましょう。


注意が必要なのは、一見、容量が同じになりそうな「縦じま」「横じま」の違いだけでも容量が変わるデータ構造です。

詳しく説明するとバイナリデータやパレット構造などのプログラム的な話になるので割愛します。


ちなみにこの赤青のタイル模様の画像は縮小してドットバイドットで表示されると赤色と青色が混ざり紫色に見えます。

それであれば、最初から紫色1色で表示したほうが画像容量は軽くなるのですが、昭和な時代のコンピュータでは、白黒、光の三原色、色の三原色である、
「青」「赤」「マゼンタ」「緑」「シアン」「イエロー」「白」の7色に無色の「黒」を加えた8色表示しかできない制限ある製品があり、疑似的に7色以外を再現する「タイルペイント」技法に需要がありました。


使用色数を減らす

使用する色が1色増えるだけで容量が増えます。

GIF/PNG8の形式で書き出されると、インデックスカラー(パレットカラー)は全256色で構成されていますので、そこから64色→32色→16色、と大まかに色数を減らしていき、
元画像の再現度が7~8割ぐらい留めている段階で止めます。

その段階から微調整の仕上げにはいり、1色ずつ徐々に色を減らして最終調整をします。

うまくディザ処理をすれば「半分の色数」で、「容量も4割」ほど減らせます。


ディザ(ディザリング)処理をしない

ディザ処理(ディザリング)はこれまでの説明のように、異なる2色を隣り合わせに並べることで足りない色を疑似的に再現する効果ですが、
タイル模様にドットが配置されることから「タイルペイント」とも呼ばれます。

この処理をすることで、仕様上の色数以上の表現ができます。

しかし、写真や段階のあるグラデーションを使っている画像の容量削減に有効ですが、ペタッとしたアニメ調の平らな表現には向きませんので使い分ける必要があります。


※厳密には、平たんな部分の無い写真画質の画像はJPEG形式が容量削減に適しています。


画像再現→色数を増やす?ディザ処理をする?

色数を減らすか、多少容量が増えてもディザ処理で元画像の再現度を保つかを判断します。

目安は、仕様設計で定めた画像容量の上限です。
色を増減させながらディザ処理具合も都度確認して、
目安の画像容量を超えないギリギリまで画像再現度を調整し書き出します。

書き出した画像はそのものに見えるかどうか、第三者に確認してもらいましょう。

問題なければ、仕様に沿った最適化された画像の出来上がりです!


リクエストを減らす→CSSスプライトで一枚画像にする

WEBページを表示する際に読み込み速度に影響を与えるのがWebサーバーへの「リクエスト」回数です。

このHTTPリクエスト回数を如何に減らすかが、WEB設計をする上で重要であり、またやりがいある作業です。

GIF画像を1枚読み込むと  1リクエスト。
GIF画像を10枚読み込むと 10リクエスト。

原則、リクエスト数が増えた分だけ処理が増え読み込み時間(待ち時間)が増えます。

現代のネット回線は太く、一度の読み込みで受け取れる情報量が増えておりますので、

1KBの画像でも、
100KBの画像でも、
読み込む速さに違いはありません。注)回線状況に影響を受ける

ページ読み込み時間に影響するのは「×リクエスト数」です。

100KBの画像を1枚読み込むより、
1KBの画像を100枚読み込む方が、総容量は同じなのに時間がかかる訳です。

前置きが長くなりましたが、
そこで有効なのが「CSSスプライト」の処理です。※「CSSスプライト」使用方法の説明は割愛します

100枚画像がどうしても必要な仕様であれば、その100枚を一枚の画像にまとめて張り付けてしまうやり方です。

1リクエストで済み、おおげさに言えば100分の1、時間を短縮できます。

WEBページで使用する場合はスタイルシートでx軸y軸の始点座標を指定することにより、マスク処理のように、画像のなかの見せたい「一部分」だけを都度表示させて運用します。


さいごに

なんでも可能な贅沢な環境よりも、制約ある作業に「やりがい」と「達成感」を感じるのも不思議なものです。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

Pocket