ディザリング画像処理(ディザ処理)を中心に、各画像形式と絡めて解説します。
Jpeg画像の容量を小さくするには？
jpegの容量を小さくするには「Adobe CC」を契約している場合は『Photoshop』で「Web用に保存」を使い60～80％の品質が無難です。
アップデートが停止している『Adobe Fireworks』はPNG8形式とGIFの減色に強いツールですが、Jpegの場合は『Photoshop』での「Web用に保存」の方が軽くなる場合が多いです。
『Photoshop』でJpegを書き出す場合は、
スマートフォン向け写真画質の画像（w750p× x 程度）であれば100～200ｋ以内に収めますが、さらに最適化をするのであればPNG8の「ディザ処理あり」の画像と比較して綺麗と思える方を運用に使います。
人物風景写真の場合はJpegが好ましいですが、60％以下に品質を下げて圧縮していくと「ブロックノイズ」が顕著に目立ってきて使用に耐えられない画像になります。
【png gif JPEGの違い】について一言でいうと、
- ・最大256色しか使えないPNG8とGIFでは、PNG8の方が容量が軽くなる
- ・PNG24、PNG32の形式では256色以上を使えるが、容量が桁違いで大きくなる ※ブロックノイズが無くJpegよりも綺麗
- ・PNGとGIFは再保存や圧縮を繰り返しても画像が劣化しないがJPEGは劣化していく
- ・過去の携帯電話端末ではGIFは使えたがPNGが使えない機種が大半であった ※docomo/auはpngが使えない機種が存在したSoftBankは両方使える
それでは、
実際に画像を使用した際、WEBページを表示するまで「８秒以上」待たされた時代がありました。
書き込み速度（ライト）、読み込み速度（リード）、が機器/回線ともに高速になった今では、WEBページ画像の重さを気に掛ける習慣が減っておりましたが、今回の世界的規模のコロナ被害により、同時刻に部屋でネットを利用する人々が増え、稀にページの表示に時間がかかる状況があります。
「いつ発生するかわからない緊急時」においても、広く公平に、WEBを問題なく閲覧できる環境を構築するために必要な「ネット回線にやさしい」軽量化/最適化された画像の作り方をアーカイブとして残します。
目次
画像容量の傾向
GIF/PNG8のインデックスカラー画像データは、原則ピクセル（ドット）配置が複雑化した分、データ容量は増えます。
よって、可能な限りベタな1色アニメ塗りを意識すれば、まず容量は軽くなります。
模様の違いによる画像容量比較
それでは様々な画像配置で比較してみましょう。
注意が必要なのは、一見、容量が同じになりそうな「縦じま」「横じま」の違いだけでも容量が変わるデータ構造です。
詳しく説明するとバイナリデータやパレット構造などのプログラム的な話になるので割愛します。
ちなみにこの赤青のタイル模様の画像は縮小してドットバイドットで表示されると赤色と青色が混ざり紫色に見えます。
それであれば、最初から紫色１色で表示したほうが画像容量は軽くなるのですが、昭和な時代のコンピュータでは、白黒、光の三原色、色の三原色である、
「青」「赤」「マゼンタ」「緑」「シアン」「イエロー」「白」の７色に無色の「黒」を加えた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ページで使用する場合はスタイルシートでｘ軸ｙ軸の始点座標を指定することにより、マスク処理のように、画像のなかの見せたい「一部分」だけを都度表示させて運用します。
さいごに
なんでも可能な贅沢な環境よりも、制約ある作業に「やりがい」と「達成感」を感じるのも不思議なものです。
次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。
他の記事をさがす ⇒ 記事一覧へ