この記事について

画像ファイルのことに関して、著者の知っていることを綴ります。
ベクター・ラスターの話から、主なフォーマット、圧縮率なんかの話をしていきます。

画像ファイルフォーマットについて曖昧･･･
ベクターって何？
「とりあえず JPEG」じゃまずいの？

そう思われた方のための記事です。
ちなみに、著者の持っている知識と感で記事を綴っていくので、もしかするとどこかに誤りを含んでいるかもしれません。
何か問題がありましたら、ご指摘頂けると幸いです。
それでは、本題へ･･･。

第一章 - メディアファイルの基礎

「メディア」とは、英語で「媒体」を意味します。
PC やスマートフォン上で再生・表示できる動画、音楽(音声)、写真(画像)ファイル。
これらは総称して「メディアファイル」と呼ばれます。

データの圧縮

画像は、色のある点の集まりです。点一つは光の三原色から、赤緑青がそれぞれ 0〜255 の 256段階、256 の 3乗(16777216)通りの表現があります。
PC では、「16進数 2ケタ = 1[Byte]」という単位でデータが扱われています。16進数 2ケタは、16 の 2乗の 256通り。
すなわち、画像の点一つの色は 3[Byte] で表現できることになります。

ところで、ある写真の解像度(一つの画像の点の数)が 4,032 * 3,024 であるとき、点の数は 12,192,768個。
その点それぞれが色の情報を持っているならば、その 3倍の 36,578,304[Byte] ≒ 36[MByte] というデータサイズになると言えます。
36[MByte] というのは、小さい数字とは言い難いでしょう。例えば、モバイルデータ通信 5[GByte] のプランを契約していると考えてみると？
36[MByte] の写真 10枚をやりとりすれば、360[MByte] = 0.36[GByte]、30枚やりとりすれば、もう 1[GByte] を超えてしまいます。

ところが、携帯で写真をやりとりしていても、30枚程度で 1[GByte] の通信は行われていません。
それは、大抵の画像は「データの圧縮」が行われているからです。
圧縮とは、データの内容を完全に、あるいは大まかな内容を保ちながら、データサイズを削減することです。
数学的なことでは、フーリエ変換だったり、離散数学だったりを活用します。
人間の特性を利用しての余分なデータの削減(例えば、人間が認知しにくい周波のデータの品質低下)等･･･あらゆる手を用います。
データ圧縮は、画像に限らず動画にも用いられますし、テキストファイル等のファイルも圧縮(例えば ZIP 圧縮)できます。

圧縮の手法(アルゴリズム)・形式は当然一つではありません。今日まであらゆる方法が研究・考案されてきています。
全ての手法において共通するのは、特定の方法で圧縮したら、特定の手法を用いないと復元ができないことです。
横書きで描かれた(圧縮された)文書を、縦書きで読んで(復元して)も正しく読めない、というような感じです。

メタデータとファイルフォーマット

圧縮・非圧縮問わず、データの書き込み方が統一されていなければファイルは読み込めません。
画像ファイルというのは、単に色の情報だけでなく、縦・横の解像度を始めとする画像全体に関する情報も必要となります。
この「データのデータ」は、「メタデータ」と呼ばれます。画像ファイルに限らず、動画、音声、文書にもメタデータは存在します。

データのデータであるメタデータ、それから画像や動画等のデータ本体が正確に揃うことで、初めてメディアファイルや文書データは成り立ちます。
データが揃っていても、書かれる・読まれる順番が場所によってバラバラでは正しく読めません。(例えば、文書を最後の行から初めの行にかけて読み進めることは普通ないように。)
そこで、ファイルを書き込んでいく・読み込んでいくルールを統一することで、異なる機種間でも同じようにデータを読めます。
このデータ書き込み・読み込みのルールのことを、「ファイルフォーマット」と呼びます。
「フォーマット」というのは、「フォーム (英語で「形づくる」)」という言葉から来ています。

やはり、このファイルフォーマットも一つしか存在しない訳ではなく、星の数ほどファイルフォーマットは存在します。
LibreOffice ODT、PDF ドキュメント、MP4 動画、MP3 音声、JPEG 写真、Photoshop PSD･･･。
扱っているデータも異なる以上、それぞれ違うファイルフォーマットです。
「ファイル変換」や「エクスポート」というのは、ファイルフォーマットを変換するという操作です。

第二章 - ラスターとベクター

「画像は、色のある点の集まり」と言いましたが、実は厳密にはそうとは限りません。点の集まりではない画像も存在します。
まず最初に、画像は「ラスター」と「ベクター」の二種に分けられます。
二者は、データの保存形式が全く異なり、特徴も大きく違いがあります。

ラスター画像

カメラで撮った写真、一般的なペイントソフトで書いた絵、SNS なんかにアップロードされる画像等、世に出回っている大半の画像はラスターです。
ラスターは、点の集まりでできている画像です。
点の集まりであるため、アップし続けると点一つひとつが見えてきて、やがてモザイク状になります。
点一つひとつのことは「ピクセル」と呼ばれ、ラスター画像は「ピクセル画像」「ビットマップ画像」とも呼ばれます。

ベクター画像

ラスターは点の集まりであるのに対し、ベクターは図形・座標情報の集まりです。
直線や円弧等の曲線での単純な図形情報が集まって成り立ちます。
図形の集まりであるため、表現できる画像には限りがあります。カメラで撮った写真のように、複雑な色彩や形を持つものは表現できません。
ですが、座標情報からグラフィックを生成するため、理論上解像度は無限となります。どれだけアップで見てもモザイク状になりません。

上図左はラスター、右はベクターでの表示(のイメージ)です。

第三章 - 主流な画像ファイルフォーマット

BMP .bmp [ラスター / 非圧縮]

恐らく、非圧縮画像フォーマットといえばこの一択。これ以外の非圧縮フォーマットは著者は知りません。
非圧縮ですから、当然元のデータは変化・劣化することはありません。
ビットマップというと、ラスター画像の呼び方のことと重複。
しかし、画像ファイルでビットマップというと、大抵 BMP フォーマットのことを指します。(たぶん)

JPEG .jpg .jpeg [ラスター / 非可逆圧縮]

非可逆圧縮というのは、元のデータを完全には復元できない圧縮のことです。
この JPEG は、主にカメラ等で撮影する写真データのフォーマットに用いられます。
不可逆圧縮である JPEG 圧縮を行うと、画像には劣化が生じてしまいます。
しかし、複雑な色彩であれば、多少の劣化を伴っても人間の目にはあまり変化は感じられません。
写真に不可逆圧縮が採用されるのは、こうした理由のためです。
色彩が複雑である写真は、可逆圧縮を行おうとすると、どうしても必要な符号が多くなり、ファイルサイズが大きくなってしまいます。

PNG .png [ラスター / 可逆圧縮]

可逆圧縮というのは、元のデータを完全に復元できる圧縮のことです。
非可逆圧縮である JPEG に対し、PNG は複雑な色彩の画像は不得意です。(ファイルサイズが大きくなります。)
PNG は、主に PC 上で作成した図やイラスト、スクリーンショット等、輪郭がくっきりしているものや色彩が単調な画像のフォーマットとして使用されます。
また、JPEG とは違って PNG は透明色というものを持つことができます。
ピクセルが Red、Green、Blue の三色に加え、Alpha チャンネル(透明度)を持ちます。

GIF .gif [ラスター - マルチレイヤ / 可逆圧縮]

PNG より以前から存在する可逆圧縮フォーマット。PNG は GIF の後継です。
GIF は 256色までしか扱うことができません。そのため、元の画像の色彩によっては劣化が生じてしまいます。
(現代のフルカラーディスプレイは 256 ^ 3 = 16,777,216色が扱えます。)
現代では当たり前となっているフルカラーディスプレイがまだ無かった、昔の PC の名残です。
GIF も透明色を持つことができますが、PNG より以前ということもあってか、半透明にはできません。完全に透明か不透明かのどちらかです。

静止画であれば大抵 PNG が用いられますが、現在でも GIF が利用されている理由があります。
それは、GIF が持つ独特の機能「GIF アニメーション」。
複数枚の絵を一つのファイルの中に梱包できる GIF は、梱包された絵を一定の間隔で連続して表示させる機能を持たせることができます。
動画とは違い、コマの絵の編集も容易です。
そのため、「GIF = アニメーション」と言っても過言ではないほど、GIF アニメーションはよく利用されます。

TIFF .tif .tiff [ラスター - マルチレイヤ / コンテナ]

TIFF は、画像ファイルの「コンテナ」です。コンテナフォーマット自体は圧縮方式を持っておらず、箱だけです。
コンテナフォーマットで定められてされているのは、箱へのしまい方です。
このファイル一つに複数枚の画像を入れることができ、また圧縮方式も(対応しているものの中で)それぞれ任意に指定できます。JPEG も対応しています。(TIFF 旧バージョンは非対応)
TIFF の形で出回る所はあまり見かけません。ただ、Photoshop、GIMP 等、複数レイヤを扱えるペイントソフトでは、大抵 TIFF に対応しています。
そのため TIFF は、複数レイヤを保ったまま他のペイントソフトにデータを移すことができる、いわゆる共通規格的なものと言えます。

RAW .raw [ラスター / 非圧縮]

デジタルカメラでの保存形式の一つです。同じ非圧縮でも、BMP とは異なります。
スマホ等で撮影し、保存される JPEG 画像は、コントラストやホワイトバランス等が自動で調整されて保存されます。
しかし、JPEG になった状態だと、コントラスト・ホワイトバランス等を後で調整しにくくなります。
RAW 画像は、コントラストやホワイトバランス等を調整する前の生の状態を保存するため、専門ソフトを利用して調整を行ってから、JPEG に書き出せます。

非圧縮であるため、ファイルサイズは大きい上、未調整の状態であることから、RAW 画像の状態のままで出回ることはほとんどありません。
RAW 画像の扱いにはある程度専門的な知識が必要となるため、市販のデジタルカメラではデフォルトでは JPEG での保存に設定されていることが多いです。
RAW 画像での保存は、手動での設定が必要であることがほとんどです。

SVG .svg [ベクター / 非圧縮]

ベクター画像フォーマットで主なのは、SVG くらいしかありません。
ただ、ベクターは SVG 上だけという訳では無いので注意。
他のラスター画像は大体バイナリデータですが、SVG はテキストデータです。
コードを少し解釈できれば、簡単な編集であればテキストエディタで編集できます。
コード表記は、HTML と同様です。

第四章 - 身近なベクター

ベクター画像は、ここでは SVG しか紹介しませんでしたが、ベクターは身近な所で動いています。
例えば、フォントもベクター形式の一つと言えます。
ワープロソフト等でフォントサイズをかなり大きくしても、線の縁は荒くなりません。
これは、フォントデータには点のデータ(ラスター)ではなく、線のデータ(ベクター)が保管されているからです。

また、ワープロソフトの図形描画機能を用いて、線や矢印等の図形を描画することがあるかと思います。
サイズを変更しても荒くならないことから、これも一種のベクターと言えます。
これらベクターデータは、PC からプリンタに送られる際も図形の座標データが送られます。
そのため、印刷をしても輪郭はくっきりします。

ちなみに、PDF にエクスポートしても文字・図形のベクターデータは保たれます。
見方によっては、PDF もベクター画像の一つととれます。
(ラスター画像の貼り付けもできるため、ラスター・ベクター両方を扱えるフォーマットととれます。)

第五章 - スマートなスケールと適材適所

ラスターの解像度とデータサイズ

ラスター画像において、当然点の数が多いほど、画像は鮮明になります。
しかし、闇雲に解像度が高ければ良いという訳ではありません。

まず、ハードウェアの特性に注目すると、PC は扱える情報量に限りがあります。
解像度を上げ続ければ、いつしかハードディスクの空きは埋まります。(容量無限のハードディスクなんて存在しませんから。)
すなわち、点の集まりの数には必ず限界があります。
また、データを人間が見れるように、ディスプレイやプリンターで出力する際にも、必ず限界の壁があります。
ディスプレイも 2K、4K と最大解像度はありますし、プリンターも分子の粒レベルのインクを出せる訳ではありません。(少なくとも現代の科学技術では。)

次に、人間の目や頭脳の特性に注目すると、人間が認識可能な鮮明さにも限界があります。
例えば 100 × 100 mm の面が二枚あり、それぞれに解像度 4000 * 4000、8000 * 8000 で同じ写真が描かれているのを想像してみてください。
恐らく二者を比べてみても、肉眼ではさほど違いは感じられないと思います。
顕微鏡なんかで見たら違いが分かるかもしれませんが、写真を顕微鏡で見ることなんて、何らかの成分調査でも無い限りまずありません。

解像度が小さ過ぎれば、品質が低下。大き過ぎればハードウェアに高負荷。
PC のデータは、最終的には人間にとって必要とされる量とハードウェアの限界を考慮して、ある程度の精度で切り落とします。
何か紙の書類を蓄えて続けていったとしても、紙に体積がある以上いつしか書類をしまう入れ物の限界が見えてきます。
すると、必要な書類を選別し、不要な書類はいつしか破棄するでしょう。それと同じです。
画像に限らず、情報処理の世界では「支障が出ない程度で情報を切り捨てる」というのはよく行われます。

現場に合わせた解像度

一概に解像度調整とはいっても、現場に合わせた適切な解像度を考える必要があります。
プレゼンテーションのスライドに貼り付ける画像を例に、解像度調整を考えてみましょう。

まず、スマートフォンで撮った写真の解像度が 4032 * 3024 であったとします。
対し、スライドを表示するプロジェクターの最大解像度がフルHD 1920 * 1080 とします。
スライドを拡大しない限りフルHD のプロジェクターで 4032 * 3024 の画像は解像度は高すぎると言えます。

では、画像の解像度は 1920 * 1080 で貼り付ければ良いか、というと、画像の貼り方によってはもう少し解像度を落としても良いでしょう。
画像をスライドの背景に用いる場合や、スライド一枚ほぼ全体に大きく画像を貼り付ける場合には、フルHD サイズでちょうど良いと思われます。
ただ、スライドに対し 1/4 程のサイズで貼り付けるとなると、フルHD ではまだ大きいです。
元のサイズの 1/16 の、1008 * 756 程の解像度くらいなら、問題無いでしょう。

ここで示したのは、あくまでも目安の一つとしてもらいたいです。
スライドをカラーで印刷すると、場合によっては解像度の低下が若干目立つかもしれません。
ひとまず、使う状況から適切な解像度を考えないと、やたら重かったり、質が悪いファイルに仕上がってしまうということを、おさえるべきでしょう。

フォーマットの使い分け

第三章でも、各フォーマットの得意不得意については若干触れました。
改めてまとめると、写真等の複雑な色彩には JPEG、イラストや図等の単調な色彩には PNG、アニメーションを利用するなら GIF。
正直、全部 JPEG、全部 PNG としたとしても、画像の表示か可能といえば可能です。
しかし、線等の図を JPEG で保存すると、不可逆圧縮による JPEG ノイズがのって、絵が汚くなります。

上図左は元の線(図形)、右は JPEG 圧縮後

写真を JPEG ではなく PNG で保存すると、ファイルサイズが増大します。

上図左は JPEG 圧縮、右は PNG 圧縮

間違いなくデータが劣化しないからといって写真を BMP で保存すれば、サイズによっては膨大なファイルサイズになります。

上図左は JPEG 圧縮、右は BMP 圧縮

そして、写真の保存において、上記 3つのフォーマットでは画質は大差無し。
オールラウンダーなフォーマットというのは、残念ながら現代の技術では存在しません。
適切なフォーマット選びをし、質のよい文書に仕上げましょう。

aKuad の余談

突然著者が画像について綴ったのは、ベクター画像との出会いがあったためです。
スライド用の自作背景画像を、ベクターを知る前までは PNG で貼り付けていました。
が、どうも PDF へのエクスポートに時間がかかっていました。
あるとき、急な思いつきで編集データ(LibreCAD で DXF を編集)を SVG エクスポートし、それをスライド背景に貼り付けてみた訳です。
すると、なんということでしょう。1分近くかかっていた PDF エクスポートが、1秒もせずに終わったではありませんか。

どうやら、PDF エクスポートする際、背景画像も再度圧縮される様子。
解像度高めにしていた背景画像が、エクスポートの高負荷を生み出していた様子。
ベクターになったことで、圧縮の必要がなくなり、エクスポートが高速に。しかも、解像度は理論上無限に。

それ以降、単純な図形であれば、ベクター画像での作成を試みるようになりました。
画像の複雑さによっては PNG よりもファイルサイズが軽かったりします。
同時に、ファイルサイズについてもいつの間にやら気にするように･･･。

おしまいに

以上、画像ファイルに関するあれこれの知識でした。
この記事を機に、画像ファイルの扱いを考え直して頂けると幸いです。
ちなみに、本記事の "(?)" ですが、書き終えてから「基礎ってレベルなんかな?」と思ったため付けたハテナです。
著者は突如ベクターに触発され、ラスター画像においても圧縮率、解像度を気にするようになり･･･。
しかも画像に限らず、様々なファイルのサイズを気にかけるようになってしまいました。そしてこの記事を執筆。
なぜ突然こうなったかは、自分でもよく分かりません。現場からは以上です。