PC版こちら

サイトに載せる画像は軽ければ軽いほどいいです。
昨今ブロードバンドが発達し、なかなか絵が表示されないーなんてことは少なくなりましたが、それでも、１秒でも速く表示された方がうれしいですし、特にバナー用の画像などでは、他より1バイトでも軽くした方が、先に表示されますので、宣伝効果にも影響することになります。
かといって、圧縮法をまちがえると汚い画像になってしまいますので、悩ましいところ。

というわけで、1バイトでも軽くかつ、見栄えのよいweb用画像の作り方について考えます。

◆まずは、圧縮形式について。

web用画像として適当なのは、「JPG」「GIF」「PNG」の３種類です。
他の形式は対応ブラウザが限られていたり、プラグインが必要だったりするので、
何か特別な理由がない限り、やめておいたほうが無難です。
携帯電話対応にしたい場合は、さらに機種によって制限があります。
たとえば私の前の携帯はGIFが表示されませんでした。
JPGにしておけばほとんどの機種で表示できるようです。

これらの圧縮形式にはそれぞれ特徴がありますので、
圧縮したい画像の特性に合ったものを使いましょう。

「JPG」：じぇいぺぐ。JPEG。
　　写真など、グラデーションで表現された画像に使う。
　　アニメ絵や文字など、線のくっきりした画像に使うと、ちょっと圧縮率を下げただけでも
　　すぐノイズが出て汚くなってしまうので注意。
　　圧縮の品質は0-100の数値であらわされる。
　　（Photoshopだと低画質・標準・高画質・最高画質となってて、わかりづらい。）

「GIF」：じふ。または、ぎふ。
　　256色までしか使えない。
　　横にとなりあうピクセル（画素）が同じ色だと圧縮率が高くなるらしい。
　　ので、アニメ絵や文字など、使っている色はこれとこれ、とわかっている画像に最適。
　　特許問題の発生で、一時フリーソフトで使えなくなったが、
　　2004年6月20日に特許の期限が切れたので、また安心して使えるようになった。
　　アニメも作れる。（しかも画像とまったく同じ扱いでweb上に掲載できる。）

「PNG」：ぴんぐ。
　　GIFと似ていて、となりあうピクセルが同じ色だと圧縮率が高くなる。
　　PNGは縦でも横でも圧縮率が高くなるらしい。
　　アニメ絵や文字などに最適。
　　色数は16色、256色、フルカラー。
　　画像の作り方によってはGIFより軽くなるので、おすすめ。
　　ただし表示の方法に特徴があって、
　　ファイルサイズに関係なくちょっともたつく感がある。
　　GIFアニメのように、PNGにもMNGというアニメーションを作れる形式があるが、
　　表示するにはブラウザにプラグインを入れる必要があるので、普及していない。　　

基本的には、実際に圧縮してみて一番軽くなったやつを使えばいいと思います。

◆どれぐらい圧縮すべきか? web画像の重さ

ファイルが重い軽いというのは、体感速度は通信環境によって異なりますので、一概には言えませんが、私が作成する場合に基準にしてるのはこんなかんじ。

バナー用画像：リンク用の看板画像です。200*40または88*31が主流。
　　20K以上だと重すぎると思います。
　　アニメGIFバナー専用のところでもない限り、避けた方がいいでしょう。
　　10K以上でもちょっと重いと思います。
　　基本的に、バナー画像はいっぱい並べて使うので、
　　他より速く表示されないと見てもらえません。
　　7K程度、できれば5K以下がベスト。
　
画像がメインコンテンツでない場合の画像：トップページやナビゲーション用の画像
　　１度に表示される画像全部あわせて40K以下がベスト。
　　それを越えたらちょっと重いかなと思います。

画像がメインの場合の画像：イラストページや写真ページなどの画像
　　ひとつあたり、40K代までは、軽くてうれしい。
　　60Kぐらいまでは、まあまあ。
　　80Kを超えたら重いと感じるので、縮小画像を置いておいて、
　　クリックしたら元サイズの画像が表示されるようにしています。

次回は画像を実際に圧縮してみて、最適な圧縮率・圧縮方法について考えます。