2010年9月4日土曜日

PNG版とGIF版

新サイトのデザインのことです。
前回書いたように、小生の所属するWingBrainの新デザインをJPEG画像を使って作成しましたが、これと同じ表示になるものとして、背景画像と文字部分とを画像ファイルとして切り離し、前者をJPEG、後者をPNGまたはGIFとして保存するというものです。

せっかくJPEGで作ったのに、何でわざわざまた違う方式で作り直すのか、と疑問が湧くでしょうが、それには理由があります。:

・JPEG画像は、その仕様からか、背景と文字とを一緒にして一つの画像ファイルにするよりも、切り離して後者をPNGかGIFにすると、トータルのファイルサイズが軽くなるようです。
(後で気付きました。。ただし、背景の種類や文字類は文字類でまとめて一つのファイルにするかどうかでも多少違ってはきますが。)

・ご覧いただく方々のPC環境(画面サイズ・ウィンドウサイズ)によって、背景画像や文字の大きさを最適化したいと思っており、そのためにはJPEGのみで作るよりも、文字部分をPNGまたはGIFで切り離す方が作成側としての都合がよいからです。
(詳細な説明はここでは省略しますが、簡単に言えば、ブラウザの仕様との相性が悪いなどによる表示の上での不具合が極めて起こりにくく、かつJavaScriptのコード量も少なく、当方で作成・用意するファイルの数も多くならないからです。)

昨夜、文字部分を透過PNGファイル(文字部分以外の背景は透明とされ、背景画像の上に重ねると、背景が透けて見えるようになる)として作成してみました。透過の作り方で意外に足踏みしましたが、何とかネット上で調べて出来ました。

ただ、その後さらにネット上で調べてみると、透過PNGはInternetExplorer6に対応していない(というか、IE6のバグのために透過されない)という致命的な問題があることが分かり、またファイルサイズを軽くするためにも、やはり文字部分は透過GIFファイルにすることにしました。

そこで、今夜はこの後、文字部分を透過GIFファイルとして作成してみます。先日試しに文字部分をGIFファイルにしてみたところ、減色が上手く行かず、一度保留としていました。
(GIFは仕様上、最大256色しか使えません。BMPやJPEG、PNGは最大16,777,216色使えますが、GIFを作成するためには、それらの膨大な色の中から、使う色を256色分選ばねばなりません。)
改めて調べてみると、フリーソフトでも、減色を最適化(16777216色の中から最も適した256色を選定)してくれるものがあるそうなので、それを使って今晩試作してみます。

これが出来上がれば、WingBrainの方のサイトデザインは確定します。その上で、当サイトのデザインも、WingBrainと極力共通化する形で、近日作成できるかと思います。
作業の進捗はこのブログ上で毎日報告させていただきますので、ご期待ください。

0 件のコメント:

コメントを投稿