あれ？画像ファイルってなんだっけ？
はじめに
画像ファイルや、解像度や色の取り扱いについて調べる機会があったので、
まとめてみようと思います。
今回の題材は表題にありますように「あれ？画像ファイルってなんだっけ？」です。
この気持ちを元に今回は記事を書いていきます。
なんとなく使ってるけど、種類たくさんあるよな？どう違うんだっけ？
のような疑問を解決していきたいと思います。
あれ？そもそも画像ファイルってなに？
コトバンクでは以下のように記述されています。
イラストや写真などの静止画像をデジタルデータとしてファイル化したもの。
静止画像をデジタルデータとしてファイル化したものを画像ファイルと呼称するようですね。
しかし、画像ファイルと一言で言っても多様な形式がありますよね。
私が知る有名どころでも、JPEG,PNG,GIF,BMP,SVG…と多様に存在しています。
これらの違いはどう違うのでしょうか？
画像の表現形式には二種類ある
ファイル形式について説明する前に、画像の表現形式について説明していきたいと思います。
画像の表現形式には二種類存在しています。
それは、ビットマップ画像とベクタ画像の二種類です。
それぞれどう違うかを説明します。
ビットマップ画像
ビットマップ形式とは、画像を色のついたドットと呼ばれる点の羅列・集合として表現するデータ再現形式のことです。格子状に細かい点に分割し、その点一つ一つに対して色や輝度情報を与えていき画像全体を表現しています。
ラスタ画像とも呼ばれます。
以下の画像を見ていただけると格子状に色付けされていることがわかると思います。
ベクタ画像
ベクタ画像はビットマップ画像とは異なりピクセルのような点の集まりからできているわけではありません。
ベクタ画像には、コントロール・ポイントと呼ばれる点があり、それらを曲線が繋いでいます。曲線の曲率は数式によって定義されています。つまり計算式によって色や曲線を表現しているため、図形を作成し、それを画像として扱っています。
描画するたびに式から計算されるため、拡大・縮小してもその解像度に合った画質で表示されます。
(ベクタ画像のサンプルはございません…
この方の記事にサンプルがございますので、ぜひ拡大してみてください。)
比較してみる
| ビットマップ | ベクタ | |
|---|---|---|
| 表現方法 | 格子状に細かい点に分割し、その点一つ一つに対して色や輝度情報を与えていき画像全体を表現 | 計算式によって色や曲線を表現しているため、図形を作成し、それを画像として扱う |
| 利点 | 無圧縮のままファイルを生成するので画質の劣化がない | 1.容量が小さくなりやすい 2.拡大・縮小しても画質が変化しない 3.変形処理がある程度自由に設定できる |
| 欠点 | 1.データ容量が膨大になる 2.拡大・縮小を行うと画質が劣化する |
複雑な輪郭線や配色を持つ図形には向かない |
| 利用用途 | 1.細かい表現や透明感を出したい場合 2.微妙な色の変化を表現したい場合 |
1.拡大して使用する必要がある絵や文字等を表す場合 2.線や面の輪郭がはっきりした画像を作成する場合 |
| フォーマット | JPEG,GIF,BMP,PNG,TIFF | SVG,PDF |
比較して見てわかるように、それぞれの使用用途は大きく異なるので
適切に画像表現形式を選ぶ必要があることがわかります。
これだけでも、画像選びの一つの軸となりそうですが、
次はそれぞれのフォーマットの特性を述べていきたいと思います。
フォーマット
画像フォーマットには多くの種類があると思います。今回は画像フォーマットのそれぞれの特性を記していきます。
JPEG(Joint Photographic Experts Group)
拡張子:
.jpgや .jpeg
特性:
JPEGは写真に適した画像形式です。
人間の肉眼では見えない情報などを大幅にカットした状態で、情報量を圧縮して保存しています。
1670万色まで表現でき、グラデーションも綺麗に表示されるのが特徴です。
しかし、非可逆式圧縮のフォーマットにより、何度も保存すると画像が劣化します。
※非可逆式圧縮とは・・・情報量をカットするので最初には戻ることができないことを言います。
｜【保存】→【保存】→【保存】→【保存】｜
｜ ↑劣化 ↑劣化 ↑劣化 ｜
上記のように画像を保存繰り返すと劣化していくことになります。
JPEGの劣化の理由は、JPEGの圧縮では、画像を8×8ピクセルの正方形で区切り、それ１つ１つで圧縮をかけていくので画質が劣化してしまうのです。
メリット:
- 高画質でファイルサイズが小さい
- グラデーションが綺麗に表現可能
- 写真などの綺麗に映し出すかつファイルサイズを小さくしたいものに適する
デメリット:
- 保存の度に画質が劣化する
- 背景の透明化ができない
- イラストやロゴには使いにくい
PNG(Portable NetWork Graphics)
拡張子:
.png
特性:
PNGはインターネット上で使われるために作られた画像形式です。
256色での保存、1670万色での保存のどちらにも対応しているだけでなく、
最大280兆色まで再現可能なフォーマットです。
またPNGは可逆式圧縮のため、保存しても画像が劣化することはありません。
JPEGと異なり、背景を透明化することが可能です。
※可逆式圧縮
PNGがなぜフルカラーで画像劣化が起きないかというと、この可逆式圧縮のためです。
PNGの採用している圧縮方式はランレングス圧縮と呼ばれるもので、
[AAABBBBCCCCC]のようなデータを[A3B4C5]のように簡単にし、元のデータの長さよりも短くすることができるのです。これは、JPEGの「データを捨てる」ではなく、「データを整理する」なので、元のデータに戻すことが可能となるわけです。
メリット:
- イラストやロゴなどに適する
- 256色からフルカラーの可逆式圧縮が可能
- 背景を透明化できる
- 保存しても画像が劣化しない
デメリット:
- フルカラーでは可逆式圧縮のため、JPEGより容量が大きくなる
GIF(Graphics Interchange Format)
拡張子:
.gif
特性:
タイトルロゴやアニメーションを作成するのに向いているフォーマットです。
JPEGと比べて最大256色とかなり少ない色しか表現できませんが、写真などではなくロゴ、アイコン、ボタンなどで使用する際には適しています。
また、JPEGとは異なり可逆式圧縮を採用しているため、保存の際に画像の劣化が起こることもありません。
他の形式と比べて大きな特徴は、アニメーションを作れることと、透明化することが可能なことにあります。
また、一度にすべてのデータを転送せず、少しずつデータを転送して最後には画像が表示されるインターレースという仕組みを導入していることから回線に負荷をかけることもありません。
メリット:
- ロゴやイラストなどシンプルな画像に適する
- データ容量が少ない
- アニメーションが作れる
- 背景を透明化することができる
- 可逆式圧縮なので、劣化がない
デメリット:
- 表現できる色合いが256色しかない
- アニメーションを作る以外の役割であれば、PNGのほうがいいことが多い
- CMYKのカラーモードを利用できない
TIFF(Tagged Image File Format)
拡張子:
.tifや**.tiff**
特性:
TIFFはJPEGのように圧縮によってデータを損なうことがないため、印刷物に使われることが多いフォーマットです。
非圧縮式なので、画像を圧縮することなく保存することができます。
したがって、画質は良いのですが、ファイルサイズは大きくなる傾向にあります。
印刷物でも画質は良いことが担保されており、印刷業界ではよく使われています。
メリット:
- 無圧縮なので、他のフォーマットより綺麗に印刷可能
- 印刷業界でよく使われる
デメリット:
- 無圧縮なので、ファイルサイズがとても大きくなってしまう
SVG(Scalable Vector Graphics)
拡張子:
.svg
特性:
XMLをベースにした二次元ベクターデータです。
ベクタ画像なので、画像を拡大,縮小しても綺麗に映し出されます。
SVGはアニメーションも透過もどちらも扱うことができ、CSSやJavaScriptを使って動きをつけることもできます。
SVGは画像ファイルということもできますが、数式や文字を用いたデータファイルという側面も持ち合わせているので、あとから色やサイズの変更が必要になったときに専用の画像ソフトを開いて編集しなくても、 CSS上でサイズや色を変更することが可能です。
<svg id="svg1" data-name="svg1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 73 73">
...
</svg>
上記のような記述で画像を表示することが可能です。
メリット:
- ベクターデータであるため、画像を拡大・縮小しても画質が劣化しない
- 数式や文字を用いたデータファイルであるので、CSS上でサイズや色を変更することができる
- 透明化することができる
- コード上に組み込むことができるので、JavaScriptなどを利用して動きをつけることができる
デメリット:
- 未対応のブラウザを配慮する必要がある
- 複雑で繊細な配色や輪郭の画像には向かない
比較
| JPEG | PNG | GIF | TIFF | SVG | |
|---|---|---|---|---|---|
| 拡張子 | .jpg .jpeg | .png | .gif | .tif .tiff | .svg |
| メリット | 1.高画質かつファイルサイズが小さい 2.グラデーションが綺麗に表現可能 3.写真などに適する |
1.イラストやロゴなどに適する 2.256色からフルカラーの可逆式圧縮が可能 3.背景の透明化が可能 4.保存しても画像が劣化しない |
1.ロゴやイラストなどに適する 2.データ容量が少ない 3.アニメーションが作れる 4.背景を透明化が可能 5.可逆式圧縮なので劣化がない |
1.無圧縮なので他のフォーマットより綺麗に印刷可能 2.印刷業界でよく使われる |
1.ベクターデータであるため、画像を拡大・縮小しても画質が劣化しない 2.数式や文字を用いたデータファイルであるのでCSS上でサイズや色を変更することができる 3.透明化が可能 4.コード上に組み込むことができるのでJavaScript等で動きをつけることができる |
| デメリット | 1.保存の度に画質が劣化する 2.背景の透明化ができない 3.イラストやロゴには使いにくい |
フルカラーでは可逆式圧縮のためJPEGより容量が大きくなる | 1.表現できる色合いが256色しかない 2.アニメーションを作る以外の役割であればPNGのほうがいいことが多い 3.CMYKのカラーモードを利用できない |
無圧縮なので、ファイルサイズがとても大きくなってしまう | 1.未対応のブラウザを配慮する必要がある 2.複雑で繊細な配色や輪郭の画像には向かない |
まとめてみるとそれぞれ特性が違うことがよくわかります。自分が作成しようとしている画像がどんな画像でどのような場面で利用するのかを考えた上で、どの形式だと一番効果を発揮するのかを見極めて剪定する必要がありますね。
画面解像度
画像解像度とは、慣用的にコンピュータ等のディスプレイに表示される総画素数を指しており、画面のきめ細かさを示すものです。数値が大きいほど画面がきめ細かに綺麗に見えたり、デスクトップ上の作業スペースが広いという傾向があります。
ディスプレイ上を細かい区画の集合で表現する際に、どのくらいこの区画が縦・横に存在するかで総画素数が変化します。
この時、一つの区画のことを画素、ドット、ピクセルと言います。
例えば、1920x1280の場合は、横に1920画素、縦に1280画素あることを示し、その二つの乗算結果が総画素数ということになります。
以下の画像を見ることで綺麗になっていることがわかるかと思います。
画像解像度の単位
画面解像度を示す単位にはppiもしくはdpiが使われています。
ppi(pixels per inch)
1インチあたりのピクセル数。
dpi(dots per inch)
1インチあたりのドット数。
プリンターなどの入出力機器の解像度などを示す際に利用されます。
ppiとdpiの違い
ディスプレイではppiとdpiは同じ意味として捉えられることが多いです。
それは、ディスプレイ上ではドットとピクセルの取り扱いがほぼ同じ扱いとなるためです。
大きく異なるのは、デジタル画像を印刷した時に違いが生じます。
デジタル画像を印刷するとピクセルからドットに変換されるのですが、
この際にドットだとピクセルと異なり隙間が多く発生してしまうため、
ピクセルの画像よりも表現範囲が少なくなってしまうのです。
色の取り扱い
画像について調べていたところ、色の取り扱いについても調べる機会があったので、そちらの方も記述していきたいと思います。
まず、色について調べてみると有名な二つのカラーモードである、RGBとCMYKを見かけることになります。この二つのカラーモードは、色について取扱う際によく使うことになると思いますが、明確な違いがあります。
どのような違いがあるのかを以下に記述していきたいと思います。
RGBカラー
RGBは、光の三原色「R（赤）・G（緑）・B（青）」を表しています。
PCのモニターやデジカメ、スキャナなどは、このRGBカラーで色が表現されています。
光の三原色であるRGBはそれぞれの色を混ぜれば混ぜるだけ白色に近づいていくカラーモードです。
このように混ぜれば混ぜるほど白色に近づくものを 加法混色と呼びます。
CMYKカラー
CMYKは、色料の三原色C（シアン）・M（マゼンタ）・Y（イエロー）のことです。
RGBとは異なり、CMYKはそれぞれの色を混ぜれば混ぜるほど色が暗くなり黒色に近づいていくカラーモードです。
このように混ぜれば混ぜるほど黒色に近づくものを減法混色と呼びます。
しかし、色料の三原色のC（シアン）・M（マゼンタ）・Y（イエロー）だけではどれだけ混ぜても灰色になっていくだけで黒色にはなりません。
そこで、KeyPlate(黒)によって、黒色を引き締めることで黒を表現し、フルカラーを表現するのです。
RGBとCMYKは同じ色を表現できるのか？
実は、RGBとCMYKでは、再現できる色の領域が異なります。
RGBの方がCMYKよりも表現できる領域が広いのです。
したがって、RGBで作成されたデータを印刷すると、CMYKでは再現できない色を一番近い色に置き換えられて再現されるため、全体的にくすんだ色になってしまいます。
したがって、印刷用のデータはCMYKで作成しないと自分の思う通りのものにならない可能性があります。
注意しましょう！
おわりに
今回は「あれ？画像ファイルってなんだっけ？」という心情を元に、画像ファイル、画像解像度、色の取り扱いについて調べてみました。
調べてみて思ったことは、なんとなくで今まで使っていたけど、それぞれには明確な違いがあって、適切なフォーマットやカラーモードをしていしなければ、綺麗な画像は作ることができないということでした。
今回の学びを活かして、画像作成やCSSの色合いなどには注意して適切に扱うことができるようにしていきたいと思います。
この記事は以上になります。
記事の中で間違いなどがございましたら、ご指摘いただけると幸いです。
参考文献
絶対覚えておきたい６つの画像形式の拡張子の種類と特徴
今注目の画像フォーマット「SVG」を使いこなすために最低限知っておきたいこと
解像度とは？「dpi、ppi」の意味と違いについて
カラーモード（RGBとCMYK）とは？