まほうのたから箱

WEBページを作成するにあたって重要な課題のひとつとしていかに画像を小さくするかということが挙げられます。

光ファイバー（100MB）で見れる接続環境にあるならあまり問題ないかもしれませんが、ダイヤルアップ（64KB）で見る側としては ページが開かなければ表示される前に見ないという選択肢を選ぶ人も少なくないと思います。

ここでは、画像の概要、加工方法について、段階毎に簡単に説明していきたいと思っています。

デジカメや携帯電話などで撮影した画像はJPEG形式で、
フリー素材からとってきた絵はGIF形式でよく保存されているのはご存知でしょうか。

画像の形式にはいろいろありますが、
WEBに使用できるGIF・JPEG・PNGについて、特徴と注意点などを簡単に説明します。

◆　GIF、PNG形式はイラスト、アイコン、ボタンなど、ベタ面を多く含む画像に向いています。

下図を見て下さい。

GIF サイズ：3KB	PNG サイズ：3KB	JPEG サイズ：5KB

上の画像を400％に拡大したもの

GIF サイズ：3KB	PNG サイズ：3KB	JPEG サイズ：5KB

◆　GIFは保存する際に256色まで色の指定ができます。
簡単に言うと保存する際に使っている色を整理するということでしょうか。
たとえば、上図でいうと、赤・黄・白・黒の画像なので、緑や青などは除外するといった感じです。

色の数が少ければ少ない程GIFを保存する際に色を落としてサイズを小さくすることができます。

◆　背景が透過できるのも、GIFの利点です。
色が指定画像に使われている色のうちの1色を指定して透明にすることができます。
なので、上図でも白を透明にするという指示を出すことにより、どのような背景でも対応できる画像を作成することができます。
なお、PNGでも透過できます。
ただし、JPEGでは透明色の指定はできません。

◆　JPEG形式は、多くの色数を必要とする写真などに向いています。
また、グラデーションのように色調が連続して変化する画像にはJPEGが適しています

下図を見て下さい。

GIF サイズ：11KB	PNG サイズ：42KB	JPEG サイズ：8KB

上の画像を300％に拡大したもの

GIF サイズ：11KB	PNG サイズ：42KB	JPEG サイズ：5KB

写真は、色を指定できませんよね

GIFだと色の指定をして保存をしていて、指定色以外の色はそれに近い色の指定色を使用するようになるため、写真画像がギザギザになったりします。

JPEGは1670万色まで色を扱うことができるので写真画像やグラデーション画像に適していると言われています。

ただし、加工する場合には注意が必要です。

◆　JPEGは保存をするときに画像を圧縮します。
圧縮する事によって画質が劣化します。
つまり、保存をする度に画質が落ちるので、元画像は大切に保管し、なるべく回数を少なく保存するようにしましょう。

取り扱える色は280兆色。
比較的新しい画像形式でGIFの変わりに登場したファイル形式です。

なのでイラスト画像で見てもGIFと画質やサイズに変わりないと思います。
また、JPEGのように画像が劣化することなく保存できるメリットがあります。

ただし、短所もあります。
JPEGよりはサイズが大きくなること
アニメーションが作成できないこと
そして最大の短所は、完全にブラウザに対応している訳ではないということです。

PNGに対応しているのは、Windows版のInternet Explorer4.0以上、 Mac版のInternet Explorer5.0以上、Netscape Navigator4.04以上で、これより古いバージョンでは、PNGを表示できません。

それほど上記のように古いバージョンはいないように感じていますが、 WEBページでより多くの人に見てもらうためには、まだまだイラストはGIF、写真画像はJPEGがいいと思います。