3. Web Images
3-2.画像形式あれこれ
ところで、画像形式という言葉をご存知でしょうか?もしくはJPG(じぇーぺぐ)だのGIF(じふ)だのPNG(ぴんぐ)だのという言葉を聞いたことはありますか? デジタルの世界では、画像を表現するのに何十通りもの記述方式がありまして、それだけで本が一冊できる程です。代表的なものは「BMP形式(びっとまっぷ)」「TIFF形式(てぃふ)」「JPG形式(じぇーぺぐ)」「GIF形式(じふ)」「PNG形式(ぴんぐ)」といったものになります。えーそんなに覚えられないよ～！という方もご安心を。実はWebサイトで使えるのは「JPG」と「GIF」と「PNG」の3種類だけです。つまり、この3種類の特徴さえ押さえておけば、Web画像こわいものなし！という事なんですね。
●その他に重要な画像形式
なのですが、やはり基本として「BMP形式」(Macの方はTIFF形式)から知っておくと何かとご利益があります。 BMP形式もTIFF形式も、Webサイト上では使えないのですが、画像をウェブサイト用に加工していく段階で、 画像の品質を維持するためにも、避けて通れないものです。
というのは、画像が一番高画質な状態を保っているのはやはりBMP形式だからです。 (Macの方はBMPをTIFFと読み替えてください) BMP形式はどのようなものかというと、画像の中の１ピクセル(画素) ごとについての色情報を「全て」保存している状態です。つまり、100ピクセルx50ピクセルのBMP画像は、 500個の色情報を持つことになります。従って、画像は最も高画質となりますが、同時に画像ファイルの 重さもピカイチです。BMP形式ではあまりにも画像が重くてWeb表示に適さない為、WebではBMP形式を 使えないようになっているのです。
それに対して、JPGやGIFやPNGといった画像形式は、「画像の品質を若干落とす代わりに、データ量を大幅に圧縮」したもので、ひらたくいうと「画像が軽い」のが特徴です。その特徴ゆえに、両者ともWeb表示のための標準的な画像形式として扱われているのです。ところでJPGとGIFとPNGはそれぞれ異なった特徴をもっているので、両者の違いを知っておくのも損はないでしょう。次の表をご覧ください。
| 画像サンプル | ファイルサイズ (150x100pixelの時) |
備考 |
BMP形式  |
(単位はキロバイト) 写真 45KB 画質劣化なし ファイル→ 超重い
2色 45KB |
■BMP形式 BMP形式の画像は全てのピクセルの色情報を持っているので、最も高画質である反面、最もファイルサイズが大きい(=重い)画像形式です。従って、Webでは使えません。性質上、BMP形式は「画像の元ネタ」として扱うのが最も適しています。つまり、元ネタ画像はBMP形式で作り、満足の行く仕上がりになった所で初めてJPGやGIF形式に変換するのです。(ここで表示している画像は便宜的に最高画質のJPG形式にしてあります) |
JPG形式  |
(普通画質の時の値です) 写真 7KB 画質→ 良い ファイル→ 軽い
2色 5KB |
■JPG形式 JPG形式の画像は、写真などの「色数が多い」「色の濃淡がある」画像を圧縮するのに適しています。圧縮の際に、高画質←→低画質を選ぶことが出来、低画質にするほどファイルサイズが軽くなるのですが、あまり低画質にしすぎると、画像に変な色のチラツキが出てきてあからさまに画像が劣化します(特に違う色同士の境界線あたりで)。どの画質で妥協するかが試される、最も一般的かつ奥の深い画像形式といえます。ちなみにJPGは必ず画像劣化を伴いますが、16万色全てを扱えるのもJPGの強みです。写真などでうまく使えば、最も軽く、最も美しい表現が出来ます。(表示画像は便宜的に最低画質のJPG形式にしてあります。通常はもっとキレイです。) |
PNG形式  |
(上は256色、下は2色) 写真 11KB 画質劣化なし 減色すれば軽い
2色 3KB |
■PNG形式 PNGの特性は画像劣化なし・高品質なまま効率よく圧縮する事ができる事です。しかも数万色使えるため、256色しか使えないGIFより自由度が高い(でも、256色以内に減色した方がファイルサイズは明らかに軽くなります)。透過PNGも作れますが古いブラウザでは表示できません。オールマイティに見えますが、画像サイズがちょっと大きめなのが欠点です。写真などはJPGの方がサイズが軽かったりするので、うまく使い分けてください。 |
次に、GIF形式について説明します。GIFは色を256色に制限する代わりに、劣化なしで高品質な圧縮を提供するもので、透過やアニメなど様々な表現が可能です。
GIF形式(一般)  |
(普通画質の時の値です) 写真 10KB 画質→ イマイチ ファイル→ まあまあ
2色 1KB |
■GIF形式(一般) GIF形式の圧縮方式は独特で、まず画像の持つ色が256色(以内)にまで減色されていなければなりません。従って、色数の少ないイラストや文字などを保存する時に威力を発揮します。例えば、2色しか使っていない画像を保存するなら、断然GIF形式の方が軽くなります。見方を変えると、元ネタが256色以内なら、BMP形式と全く同じ高画質である上にファイルサイズが超軽くなる、という夢のような圧縮が可能です。 反対に、色数や色の濃淡の多い写真などは通常、数万色使う事も珍しくないのですが、GIFに変換する時に無理矢理256色まで減色しなければならないので、画像がガビガビになってしまう事も。しかもその場合、ファイルはJPG形式より重くなるケースが多いので、基本的には写真はJPG形式で保存するのが無難でしょう。 |
透過GIF
アニメGIF
インターレースGIF |
(あくまで参考値です) 透過 1KB アニメ 3KB インターレース 11KB |
■GIF形式(特殊) GIFはさらに、Web専用の特殊な形式での保存が可能です。ひとつは「透過GIF」と呼ばれるもので、画像の中の特定の1色だけを「透明」にして、Webページの背景色を透かした状態で表示する事ができます。「透過GIF」は使い道次第で、貴方のWebサイトを非常に美しく表現してくれます。 次に「アニメーションGIF」というのもあります。これを作るには専用のソフトが必要なので、今回は説明を省きますが、これもアイデア次第でかなり独創的な作品が作れます。 他にも「インターレースGIF」という形式もあります。巨大で重いGIF画像を表示する際に、最初はモザイクのような粗い画像から順々に、高画質な画像を表示してくれるもので、Webの閲覧者にとって優しい方式です。ただし、全体のファイルサイズが通常のGIFより重くなる場合もあります。 |
