時々見かけるんですけど、ホームページ上で使う画像フォーマットを何でもかんでもGIF、あるいはJPEGにする人って、結構いるみたいなんです。それぞれに長所、短所があるんだから使い分けて欲しいし、それに巨大なGIF画像やノイズだらけのJPEGは迷惑なもの。それをちょっとでも知ってもらいたいなぁと思ったのが、このページを制作した由来です。
画像フォーマットの使い分け
現在、インターネット上で画像フォーマットとして主に使われているのは、GIF（Graphics Interchange Format）とJPEG（Joint Photographic Experts Group）の２つです。GIFは使える色数は256色と少ないのですが、その分少ない色数の画像には向いており、画質の劣化も少ないです。一方JPEGは24bitフルカラー（1677万色）を表現できますが、あまり圧縮しすぎると画像の劣化を招きます。
まず、GIFが得意としている色数の少ない画像について見てみましょう。
| 画像形式 | 画像 | ファイル | 相対値 |
|---|---|---|---|
| GIF 256色 |
2,859 | 1.00 | |
| JPEG 1677万色 |
5,581 | 1.95 | |
| JPEG 1677万色 |
2,881 | 1.01 |
こちらは私のデスクトップ画面の一部をキャプチャしたものですが、同じ画像を表示しているのに、GIF,JPEGでファイルサイズに倍近い差が付いています。その差を埋めるべく、一番下のJPEG画像ではGIFと同じサイズまで圧縮をかけているのですが、こちらはそれぞれのオブジェクトの周りにノイズが出ているのが分かります。こういった色数の少ない、境目がハッキリした画像にはGIF形式が合っています。
さて、次はJPEGが得意としているフルカラー画像について見てみましょう。
| 画像形式 | 画像 | ファイル | 相対値 |
|---|---|---|---|
| JPEG 1677万色 |
10,127 | 1.00 | |
| GIF 256色 |
25,567 | 2.52 | |
| GIF 22色 |
10,382 | 1.03 |
それぞれ、GIF、JPEG、JPEGと同じファイルサイズまで減色したGIFと並べてみました。このような画像をGIF形式で保存した場合、JPEG形式で保存した場合よりファイルサイズが倍以上になりますし、少なくしようとして減色しても、色数が少なすぎてきちんと表示出来ません。
とまぁ、このようにそれぞれの画像フォーマットには得意、不得意があります。上手に使い分けて、表示の美しさと、ファイルサイズの減少を両立しましょう。
そのGIF画像、256色も必要ですか？
あと、この事に気づいている人って結構少ないんですけど、GIF形式で保存する場合、何でもかんでも256色で保存していませんか？。確かにGIFフォーマットでは256色まで使えますけど、だからと言って256色で保存するのはファイルサイズを下手に増やすだけです。
上記で使った画像を、それぞれ減色して保存すると、以下のようになります。
| 色数 | 画像 | ファイル | 相対値 |
|---|---|---|---|
| 256色 | 2,862 | 1.00 | |
| 128色 | 1,955 | 0.68 | |
| 64色 | 1,955 | 0.68 | |
| 32色 | 1,755 | 0.61 | |
| 16色 | 1,484 | 0.51 | |
| 8色 | 832 | 0.29 |
減色していくと、徐々にファイルサイズが小さくなっているのが分かると思います。さすがに8色まで減色してしまうと、色数が足りずにきちんと表示されませんが、16色でも十分ですよね。
256色と16色、見た目にはほとんど変わらないのに、ファイルサイズは半分になっています。一つだけなら大差はありませんけど、大きな画像が多数使われている場合、画面表示の時間は単純に考えて半減します。2秒が1秒になっても大差は無いですけど、もし2分が１分になったら…凄く変わった気がしますよね。それに、もしiモードなどのデータ量で課金されるシステムの場合、そのまま見た人の使用料金に直結します。
なるべく表示に時間の掛からない、軽いページを作るのはホームページ作りの基本中の基本。あなたのホームページのGIF画像も、もっと小さくできるかもしれませんよ？
ファイルサイズを小さくする方法～GIFの場合
使い方は見ての通り。色数の変更でそれぞれ選ぶと、リアルタイムで減色されるので、きちんと表示される中で出来る限り減色しましょう。
また、GIFの場合は徐々に表示される、インターレスGIFを選ぶ事も出来ます…が、こちらを選ぶとファイルサイズが増加する傾向にあるので、個人的にはお勧めしません。途中でどんな画像か分かるよりは、早く表示される方がいいと思いませんか？
ファイルサイズを小さくする方法～JPEGの場合
また、JPEGにも画像が徐々に表示される、プログレッシブJPEGという形式があり、こちらの場合はインターレスGIFと違って、ファイルサイズが減少しますので、こちらは是非使うようにしましょう。GIFの場合と同じく、ホームページビルダー2001上でも変更できます。
| サブサンプリング | ||||
|---|---|---|---|---|
| なし | YUV422 | YUV411 | ||
| モード | 標準 | 13,778 | 11,938 | 10,945 |
| 標準の最適化 | 13,364 | 11,553 | 10,570 | |
| プログレッシブ | 12,823 | 11,052 | 10,127 | |
もちろん圧縮率は変えていませんから、画質にはほとんど変化は無いのですが、圧縮形式によってファイルサイズがかなり減少できるのが分かると思います。
これは一例ですが、他のソフトでも使えるオプションがあるなら、それらを色々試してみてファイルサイズを減らしてください。
最後に
ここまで上げたのはほんの一例ですが、無駄に大きな画像ファイルがインターネット上には多数見られます。上記の方法をインターネット上の画像ファイルに試してみると、ほとんどの画像が画質を損なわずにファイルサイズを減らせます。たとえそのファイル自体には大差なくても、ページ全体で見るとかなり減っている事が多いです。
自分のHD上だと一瞬でも、他の人がインターネット上で見る場合、意外と表示に時間が掛かるもの。あなたのホームページも、もしかしたら表示に時間が掛かって、見る人を苛つかせていたりして…。
あと、実はこれ以外に、もう一つ画像ファイルのサイズを減らす方法があります。次のコーナー私がGIFからPNGに移行した訳では、そのための画像フォーマット・PNGについて書きたいと思います。