コンピュータで画像を保存する際には、様々なデータ形式を選んで保存することができます。
このページでは、画像保存の際にどういったデータ形式があり、どういう特徴があるのかを解説します。
ウェブページに画像を掲載する際に利用できる画像のデータ形式は
JPG (JPEG) と GIF と PNG の3種類です。
その他、Windows で作業中は BMP 形式が使われるケースも多いです。画像を保存する際に GIF JPG PNG のどの形式で保存するのかが、ウェブページ制作初心者がよく迷う疑問の一つかとおもいます。
さまざまなデータ形式の特徴を詳しく説明していってみましょう。
BMP形式はウェブページに掲載する画像の保存形式としては使えませんが、最もシンプルな保存形式であるため、Windows アプリケーションで画像を扱う際によく登場します。BMP はデジタルデータをそのまま単純に記録するため、元画像を完璧に再現できますが、保存時のデータ容量が、莫大な量になるのが欠点です。
たとえばハイビジョン画質のフルカラー映像を一枚保存すると 6MByte ほどのデータ容量になります。
（これは たとえば携帯デバイスなどに保存した場合 10枚程度で容量が一杯になる程度の容量です。）作業中の一時的な保存用途としては良いでしょう。
しかし沢山の画像を保存する場合などデータ容量がかさばり、ディスク容量を圧迫するのが問題です。
圧縮フォルダ（ZIP形式）などで、別途データ圧縮をかけると、有効な場合があります。
JPG は最近ではウェブで利用される一般的な画像形式です。
保存時のデータ容量はかなり小さくなるのが特徴です。
BMP 以外のほぼすべてのデータ形式は、データ容量を圧縮する機能を持っているためです。JPGの圧縮は、他のデータ形式より数段優れた圧縮効果がありますが、“不可逆圧縮” と呼ばれるデータ圧縮方式を採用しており、若干の画質劣化が発生します。
JPG の画質劣化は、高いコントラストの境界で小さな濃淡のむらのようなものが見えるのが特徴です。
たとえば下の画像で、人物の輪郭に注目すると分かるでしょう。
しかし、JPG が役に立たない形式ということはありません。
上の画像は拡大をしたため、濃淡のむらのようなものが目立っていますが、実際のサイズでは、あまり目立ちません。
JPG 圧縮は、人間の視覚の特性を利用して、うまく見た目の画質を維持しようとします。
圧縮しすぎなければ、そして細部を拡大しすぎなければ、肉眼では画質劣化が分かりづらいようになっているのです。この工夫により、JPG 形式は、若干の画質と引き換えに、データ容量を圧倒的に小さくすることができます。
たとえば自然画像は情報量が多く、他の画像形式ではデータ容量を小さくするのが難しいですが、JPG 形式であれば、かなり少ないデータ容量で保存できます。ただし、JPG 形式は保存するたびに画質劣化が進みます。
そのため、編集と保存を繰り返し行う用途には向きません。
編集作業などを行う際は、他のデータ形式（ PNG など ）で画像を保管しておくべきです。
GIF は、ほとんどの環境で すでに時代遅れの形式で、現在は PNG 形式に置き換わっています。
GIF は JPG と違って元の画質を損なわない可逆圧縮ですが、１枚の画像で使用できる色の数が256色までという制限があります。それでも GIF はいくつかの状況ではウェブグラフィックにとってそこそこ良い選択です。
色数の少ない画像ではPNGよりもデータ容量が小さくなる傾向があります。
gif 形式 2.93kByte png 形式 4.46kByte また GIF （および PNG ）形式は JPG 形式と異なり、透明色をサポートしているので、キャラクターなどの背景部分を、透明に設定しておくと、背景画像の上にキャラクタ画像を配置した際、境界部分が自然に見えるメリットがあります。
背景部分が透明色の画像 背景色が異なってもうまく重なる
PNG 形式は GIF 形式に変わって新しく登場した画像のデータ形式です。
元の画質を損なわない可逆圧縮で、GIF と異なり色数の制限もありません。
さらに透明色もサポートしているので、GIF のように背景と重ねる用途にも適します。完璧に思える PNG 形式ですが、いくつか問題はあります。
まず、写真画像を保存する際は、データ容量を比較すると JPG 形式より大きくなります。
（圧縮の難しい写真画像において、画質劣化を招いてまで圧縮する JPG には かなわないということです。）そしてもう一つの問題は、データ形式が生まれてからの歴史が浅いことです。
パソコンのブラウザでサイトを閲覧するのであれば、PNG 形式におおむね対応しているので問題ありませんが、
モバイル機器のブラウザで旧式のものは、もしかすると PNG 形式に対応しおらず、画像が表示できないかもしれません。その為、古い携帯電話に対応するサイトを制作する場合や、さまざまな利用者に対する表示の互換性を重視する場合は
PNG 形式を避けたほうがいいかもしれません。
各アプリケーションは独自のデータ保存形式を持っている場合があります。
たとえば有名な画像処理ツールである Adobe Photoshop は PSD形式。
学内のコンピュータにインストールされているフリーの画像処理ツール Paint.net の場合 PDN形式 などです。これらのデータ形式は各アプリケーションが持つ特殊な機能（レイヤー、アルファチャンネル、ベクトルグラフィック、オブジェクトなど）を記録しておくために必要なものです。
編集作業を行うためにはこれらの保存形式でファイルを保管しておくのが望ましいですが、ウェブページに掲載する際は、ほとんどの場合、そのままでは画像を表示できませんので、JPG PNG GIF といった形式に再保存する必要があります。
多くのアプリケーションでは [ 名前をつけて保存 ] の際に [ ファイルの形式 ] を選択することができ、
JPG 等に設定して再保存する という作業を行うことになります。もちろん元の画像は、各アプリケーションの独自機能を残すために、専用のデータ形式で別にとっておきましょう。
各データ形式の特徴をまとめると、以下のようになります。
データ形式 読み方 特徴 BMP びっとまっぷ 利点 データ構造が単純なので各アプリケーションが扱いやすい。(対応アプリが多い。) 欠点 保存時のデータ容量が莫大。
ウェブページでは使用できない。JPG じぇいぺぐ 利点 保存時のデータ容量を大幅に削減できる。 欠点 保存時に画質が悪くなる。 GIF じーあいえふ
じふ利点 透明色を表現できる。 欠点 1つの画像に使える色の数が256色まで。(色が正しく表現できない場合あり。) PNG ぴーえぬじー
ぴんぐ利点 GIFの欠点を克服し色数の制限がない。 透明色を表現できる。 欠点 比較的新しい規格なので、画像を表示できない古い機器があるかもしれない。 それぞれ、利点と欠点があるため、場合によってデータ形式を使い分ける必要があります。
画像を見栄え良く表示するためには、基本的なルールを押さえておきましょう。
コントラストがはっきりしていて、くっきりとした境界線のあるウェブグラフィックには、PNG や GIF が適しています。
JPG 形式はこのような画像を扱うのが得意ではありません。
JPG のほうがデータ容量は小さくなるかもしれませんが、このような画像では、濃淡のむらが、よりはっきり見えてしまうため、画質の劣化を顕著に感じることになるでしょう。
GIF形式 2.9kByte
くっきりした画像
JPG形式 2.3kByte
境界線付近に"むら"が発生
GIF形式 0.9kByte
JPG形式 1kByte
写真などの自然の風景を映した画像ならば、JPG が適しています。
不可逆圧縮の圧縮量を多くしすぎないよう注意して、オリジナル写真から1回保存する程度であれば、JPGによる画質劣化はほぼ目に見えません。
それどころか他の形式に比べて大きなデータ容量の減少が実現できるでしょう。
反対に、PNG 形式では劣化は無いもののデータ容量が多く、GIF 形式では画質の劣化が目立つため、あまり適していません。
JPG形式 39kByte
PNG形式 184kByte
GIF形式 45kByte
どちらの形式を使えばいいのか分からない場合や、写真的要素とグラフィック要素の両方を含んだ画像の場合には、バックアップコピーをとっておいた上で、上記のような一般的なルールを踏まえて異なる形式をためしてみると良いでしょう。
もしあなたと一緒にウェブページを編集している相手に、画像を送信する必要がある場合には、画質劣化のない形式 （PNG。 場合によっては GIF。 ）で送るべきかもしれません。
JPG 形式などを使って、画質を劣化させると、もう元に戻すことはできないからです。
（画質が劣化した JPG を別の形式で再保存しても、劣化した部分が綺麗になったりはしません。）
このような場合には、データ容量を犠牲にしても、元の画質を保つことのほうが、重要かもしれません。参考にしてください。
