2006 . 08 . 22

サイトのWeb素材を減色する

一ヶ月ほど前にサイトをリニューアルしましたが、旧サイトに比べ画像のWeb素材の使用率が多くなりました。

旧サイトでは軽量化にこだわるあまり、頑なに画像やスクリプトの使用を避けてきましたが、高速通信の普及化が進んだこのご時世、そんな気使いも無用かなと思うようになりました。その反動も手伝って現在は比較的に画像やスクリプトを多く使ったサイトになってます。

ただ、使用する画像のファイルサイズのことなど一切考慮せず、やみ雲に画像を使っているため、FTTHの環境であってもページによっては表示されるまで多少ブランクが生じることが気になり始めました。写真を扱ったサイトのように、メインの素材が重いのならいさ知らず、アイコンのような脇役が足の引っ張っているのではバカバカしい、ということでアイコンやロゴを中心に減色してみました。

使用したのは OPTPiX webDesigner 3 というシェアウェアのソフト。

元画像　1.00KB

128色　630B

64色　414B

32色　295B

16色　216B

8色　153B

4色　121B

2色　85B

上の例は16x16のGIF画像。
色数とファイルサイズの関係はこんな感じで変化していきます。このケースでは大体16色もあれば十分ではないでしょうか。
こういう素材ではパッと見、元画像と16色ぐらいならほとんど違いがわかりませんが、サイズは1/5程度にまで抑えられます。

こんな感じで、アイコンなどのWeb素材の画像をダウンサイジングした結果、おおよそ半分以下になり、サイトの表示のもたつきも大幅に改善しました。