画像ファイルのデータ形式

戻る

コンピュータで画像を保存する際には、様々なデータ形式を選んで保存することができます。

このページでは、画像保存の際にどういったデータ形式があり、どういう特徴があるのかを解説します。

データ形式の種類

パソコンで画像を保存する際には、「データ形式」を選んで保存する必要があります。

データ形式は、画像を保存するための規格のようなもので、沢山の種類があります。

ウェブページに画像を掲載する際に利用できる画像のデータ形式は JPG (JPEG) と GIF と PNG の3種類です。
その他、Windows で作業をする際には BMP 形式が使われるケースも多いです。

画像を保存する際に、どの形式で保存するのか、ウェブページ制作の初心者がよく迷う疑問の一つかとおもいます。

そこで、代表的な画像のデータ形式についてまとめてみました。

BMP形式 (びーえむぴー・びっとまっぷ)

BMP 形式はウェブページに掲載する画像の保存形式としては使えませんが、最もシンプルな保存形式であるため、Windows アプリケーションで画像を扱う際によく登場します。

BMP はデジタルデータをそのまま単純に記録するため、元画像を完璧に再現できますが、保存時のデータ容量がかさばるのが欠点です。

たとえばハイビジョン（ＨＤ）画質のフルカラー画像を一枚保存すると 6MByte ほどのデータ容量になります。
これは、たとえば容量の小さな携帯デバイスなどに保存した場合、数十枚程度で容量が一杯になる程度の容量です。

BMP 形式は、作業中の一時的な保存用途としては良いでしょう。
しかし沢山の画像を保存する場合などでは、ディスク容量を圧迫するのが問題です。
圧縮フォルダ（ZIP形式）などで、別途データ圧縮をかけると、容量を削減できる場合があります。

逆にシンプルなデータ形式ゆえに、多くのアプリが BMP 形式を取り扱えるというメリットもあります。

JPG形式 (じぇいぺぐ)

JPG はウェブで一般的に利用されるメジャーな画像形式です。

保存時のデータ容量はかなり小さくなるのが特徴です。BMP 以外のほぼすべてのデータ形式は、データ容量を圧縮する機能を持っているためです。

JPG の圧縮は、他のデータ形式より数段優れた圧縮効果がありますが、「不可逆圧縮」と呼ばれるデータ圧縮方式を採用しており、若干の画質劣化が発生します。画質の劣化と引き換えに、高い圧縮効果があるというわけです。

JPG の画質劣化は、コントラストの差が大きい境界線付近で目立ちます。色のゆらぎが生む「もや」のようなものが見えるのが特徴です。
たとえば下の画像では、人物の輪郭部分に注目するとよく分かるでしょう。

人物の周囲にもやのようなものが見えます。

上の画像は拡大をしたため、もやのようなものが目立っていますが、実際のサイズでは、あまり目立ちません。

上と同じ画像ですが、縮小するともやはあまり目立たなくなります。

JPG 圧縮は、人間の視覚の特性を利用して、うまく見た目の画質を維持しようとします。
圧縮しすぎなければ、そして細部を拡大しすぎなければ、肉眼では画質劣化が分かりづらいようになっているのです。

この工夫により、JPG 形式は、若干の画質と引き換えに、他のデータ形式に比べて非常に強力にデータ容量を小さくすることができます。
たとえば自然の風景画像などは情報量が多く、他の画像形式ではデータ容量を小さくするのが難しいですが、JPG 形式であれば、かなり少ないデータ容量で保存できます。

ただし、JPG 形式は保存するたびに画質劣化が進みます。
そのため、編集と保存を繰り返し行う用途には向きません。保存を行うたびに、画像の品質が損なわれていくことでしょう。
編集作業などで度々保存を行う際は、他の PNG 形式などで保管しておくべきです。

GIF形式 (じーあいえふ・じふ)

GIF 形式は、ほとんどの環境ですでに時代遅れの形式で、現在は PNG 形式に置き換わりつつあります。
GIF は JPG と違って元の画質を損なわない可逆圧縮ですが、１枚の画像で使用できる色の数が256色までという制限があります。

それでも GIF はいくつかの状況ではウェブグラフィックにとってそこそこ良い選択です。
色数の少ない画像では PNG よりもデータ容量が小さくなる傾向があります。

gif 形式 2.93kByte

png 形式 4.46kByte

GIFはシンプルなイラストほど得意

また GIF や PNG 形式は透明色をサポートしているので、キャラクターなどの背景部分を透明に設定しておくと、背景と自然に重ね合わせることができるメリットがあります。（JPG 形式は、透明をサポートしていないので、明確なアドバンテージとなります）

背景部分が透明色の画像

背景色に重ねた様子（星の周囲が透明のため、背景が見えています）

PNG形式 (ぴーえぬじー・ぴんぐ)

PNG 形式は GIF 形式に変わって新しく登場した画像のデータ形式です。
元の画質を損なわない可逆圧縮で、GIF と異なり色数の制限もありません。
さらに GIF と同様に透明色もサポートしているので、上記のような背景と重ねる用途にも適します。

要するに PNG 形式は、GIF 形式の上位互換であるといえます。😎

PNG は GIF の上位互換
GIF に出来ることはだいたい PNG でもできます。

完璧に思える PNG 形式ですが、弱点もあります。

まず、写真画像を保存する際は、データ容量を比較すると JPG 形式より大きくなります。
写真画像のような複雑な画像においては、画質劣化を招いてまで圧縮をする JPG にはかなわないということです。

そしてもう一つの問題は、比較的新しい規格のデータ形式であることです。
パソコンのブラウザでサイトを閲覧するのであれば、PNG 形式におおむね対応しているので問題ありませんが、
モバイル機器のブラウザで旧式のものは、もしかすると PNG 形式に対応しおらず、画像が表示できないかもしれません。

そのため、古い携帯電話に対応するサイトを制作する場合や、さまざまな利用者に対する表示の互換性を重視する場合は、PNG 形式を避けたほうがいいかもしれません（とはいえ2020年時点では、大半の端末が PNG 形式に対応しているので、特殊な事情で古い端末を使わなければならないような状況でもない限り、あまり気にする必要はないかも知れません）。

その他の保存形式

画像編集用の各アプリケーションは、独自のデータ保存形式を持っている場合があります。

たとえば有名な画像処理ツールである Adobe Photoshop なら PSD 形式。
学内のコンピュータにインストールされているフリーの画像処理ツール Paint.net の場合 PDN 形式といった具合です。

これらのデータ形式は各アプリケーションが持つ特殊な機能を記録しておくために必要なものです。

編集作業を行うためにはこれらの保存形式でファイルを保管しておくのが望ましいですが、ウェブページに掲載する際は、ほとんどの場合、そのままでは画像を表示できませんので、JPG PNG GIF といった形式に変換して再保存する必要があります。

多くのアプリケーションでは「名前をつけて保存」を行う際に「ファイルの形式」を選択することができるので、JPG 等に設定して再保存する、という作業を行うことになります。

もちろん元の画像は、各アプリケーションの独自機能を残すために、専用のデータ形式で別にとっておきましょう。

各データ形式のまとめ

各形式の特徴をまとめると、以下のようになります。

データ形式	読み方	特徴
BMP	びっとまっぷ	利点	データ構造が単純なので多くのアプリが対応している。
BMP	びっとまっぷ	欠点	保存時のデータ容量が大きい。ウェブページでは使用できない。
JPG	じぇいぺぐ	利点	保存時のデータ容量を大幅に削減できる。
JPG	じぇいぺぐ	欠点	保存時に画質が悪くなる。
GIF	じーあいえふじふ	利点	透明色を表現できる。
GIF	じーあいえふじふ	欠点	1つの画像に使える色の数が256色まで。(色を正しく表現できない場合あり)
PNG	ぴーえぬじーぴんぐ	利点	GIFの欠点を克服し色数の制限がない。透明色を表現できる。
PNG	ぴーえぬじーぴんぐ	欠点	比較的新しい規格なので、古い端末は対応していない場合がある。

それぞれ、利点と欠点があるため一長一短となっており、場合によってデータ形式を使い分ける必要があります。

どのデータ形式を使うべきか？

つまるところ、どんな画像対してどのデータ形式を使うべきなのでしょうか？

画像を見栄え良く表示するために、適切なデータ形式の選び方を紹介しましょう。

コントラストがはっきりした画像

コントラストがはっきりしていて、くっきりとした境界線のあるウェブグラフィックには、PNG や GIF が適しています。

一方、JPG 形式はこのような画像を扱うのが得意ではありません。
JPG のほうがデータ容量は小さくなるかもしれませんが、このような画像では、濃淡のむらが、よりはっきり見えてしまうため、画質の劣化を顕著に感じることになるでしょう。

GIF形式 2.9kByte くっきりした画像👍	JPG形式 2.3kByte 境界線付近ににじみが発生👎
GIF形式 0.9kByte くっきりした画像👍	JPG形式 1kByte 文字周辺ににじみが発生👎