この記事はNuco Advent Calendar 2023の19日目の記事です。
弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。
また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。
はじめに
エンジニアであればプロジェクトで画像ファイルに触れる機会は多々あると思いますが、
あなたは画像ファイルの中身について詳しく説明できますか？
本記事では、画像ファイルの形式ごとにデータがどのように格納されているかを詳しく解説します。「ピクセルごとにRGBの値が設定されていて...」くらいの理解度であれば、ぜひこの記事を読んで画像ファイルに関する知見を深めましょう。
ファイル構造の理解
画像ファイルはそれぞれ異なる構造を持っています。
一般的な構造は、ヘッダー、メタデータ、画像データから構成されます。
ヘッダーにはファイルの種類やバージョン情報が含まれ、メタデータは画像に関する追加情報を提供しています。画像データはピクセルの色情報が格納される領域で、形式によってその構造が異なります。
これらについて理解を深めることで、画像処理アルゴリズムやデータの解析において有益な手がかりとなり得るのではないでしょうか。
PNGファイル
PNGファイルの概要
PNGはPortable Network Graphicsの略称です。
PNGファイルは1600万色を表現可能であり、これをを無劣化で圧縮可能であるので、図やイラストなどの保存に向いています。
また、背景の透明・半透明のグラフィック処理が可能なため、Webデザイナーがよく用いるファイル形式でもあります。
PNGファイルの構造
PNGファイルは、シグネチャとチャンクという要素で構成されています。
シグネチャは必ずファイルの先頭にあり、その次にチャンクが来ます。
チャンクは様々な種類があり、必須となるチャンクが IHDR, IDAT, IEND の3つです。
チャンクのかたまりの中で、IHDRチャンクは必ず先頭にあり、IENDチャンクは必ず末尾に来ます。
ファイル全体としては以下のようになっています。
- シグネチャ
- チャンク(IHDR)
- チャンク
...
... - チャンク(IEND)
シグネチャ
シグネチャは必ずファイルの先頭に位置していて、このファイルがPNGファイルであることを示しています。中身は以下のような8byte長のデータであり、2~4byte目をデコードすると
"PNG"となりファイル形式を表していることがわかります。
address 00 01 02 03 04 05 06 07
00000000 89 50 4e 47 0d 0a 1a 0a
チャンク
チャンクの基本的な構造は以下のようになっています。
| フィールド名 | サイズ | 内容 |
|---|---|---|
| Length | 4byte | このチャンクの Chank Data の大きさを表す |
| Chank Type | 4byte | このチャンクの種類を表すアルファベット4文字 |
| Chank Data | 0byte以上 | チャンクの種類に関連したデータ本体 |
| CRC | 4byte | データのエラーを検出するための情報 |
必須チャンク
先述の通りPNGファイルには4つの必須チャンクが存在します。
ChankTypeごとにChankDataに何が格納されているか詳しく見て行きましょう。
IHDR
このチャンクにはこの画像ファイルに関する情報が格納されています。
| フィールド名 | サイズ | 内容 |
|---|---|---|
| Width | 4byte | 画像の横幅 |
| Height | 4byte | 画像の縦幅 |
| Bit Depth | 1byte | ビット深度 |
| Color Type | 1byte | パレット、カラー、αチャンネルの情報 |
| Compression Method | 1byte | 画像データの圧縮方式 |
| Filter Method | 1byte | 圧縮前の画像データに対して行った事前処理 |
| Interlace Method | 1byte | 画像データのピクセルの出現規則 |
IDAT
IDATチャンクには画像のメインデータである各ピクセルの色の情報が格納されています。
ピクセル毎に、RGBの値の表現に8bitずつ必要となるので、512×512のPNG形式の画像だとしたら786432 bytesが画像のデータとなります。
PNG形式ではこの画像データは、zlibと呼ばれるライブラリを使用して圧縮されています。
IEND
チャンクのかたまりの最後に出現するチャンクであり、ファイルの終点であることを示しています。IENDチャンクはChankDataを持たず、Lengthは常に0となります。
| フィールド名 | サイズ | データ |
|---|---|---|
| Length | 4byte | 0 |
| Chank Type | 4byte | IEND |
| CRC | 4byte | (省略) |
PNGの利点と制限
利点
- 可逆圧縮: 元の画像データを正確に再現可能。
- 透過サポート： PNGは透過チャンネルをサポートしてるので、画像内の一部分を透明にすることが可能。
制限
- 圧縮率： JPEGに比べて圧縮率が劣る場合があり、特に写真などの複雑な画像においてファイルサイズが大きくなることがあります。
- 色空間の制約： CMYKなどの印刷向けの色空間を直接サポートしていないため、プリント用途では注意が必要です。
使い道
Webデザイン、ロゴやイラストの保存するときに使用されます。
JPEGファイル
JPEGファイルの概要
JPEGは、Joint Photographic Experts Groupの略称です。
静止画像を圧縮して保存するファイル形式として現在標準的に使われている形式です。
可逆圧縮形式もサポートしていますが、可逆圧縮は特許などの関係でほとんど普及していません。1992年9月18日にリリースされた比較的古いフォーマットです。
JPEGの欠点を克服すべく数々の後継規格が提案されてきましたが、いずれも主流になるには至らず、JPEGが現在も静止画像規格の主流となっています。
JPEGファイルの構造
JPEGファイルは、先頭にSOIマーカー、末尾にEOIマーカーというもので挟まれていて、その間の領域に複数のセグメントとイメージデータが存在する、というような構造になっています。
SOIマーカー、EOIマーカー
SOIマーカーはJPEGファイルの先頭にあり、JPEGファイルの起点を表すマーカーです。
多くの画像ビュアーはこのSOIマーカーを読み取りJPEGファイルの判別を行っているため、SOIマーカーが無ければ画像は表示不可。中身は0xFFD8という2バイトのコードです。
EOIマーカーはJPEGファイルの終わりを表すマーカです。
多くのJPEG画像ビュアーでは画像データの途中からデータが破損している場合を考慮し、EOIが無くても画像を表示可能となっています。中身は0xFFD9という2バイトのコードです。
必須セグメント
JPEG形式にはファイルを構成する上で必須となるセグメントが4種存在します。
| フィールド名 | 内容 |
|---|---|
| DQT (Define Quantization Table) | 量子化テーブル定義 |
| DHT (Define Huffman Table) | ハフマンテーブルデータ |
| SOF (Start Of Frame) | JPEGファイルの種類や画像サイズなどの情報 |
| SOS (Start Of Frame) | 圧縮方式などの情報 |
DQT (Define Quantization Table)
このセグメントには、量子化という工程に必要な量子化テーブルの定義が格納されています。量子化とは一般に連続値を離散値で表現することであり、画像ファイルに関して言えば、見た目をそれほど変化させることなく圧縮率を上げる処理のことを指します。
JPEG画像は8×8ピクセルのブロックに分割され、各ブロック内の輝度や色差などは座標軸上で波形として表現されます。この波形は離散コサイン変換によって細部が簡略化されますが、その後のデータの端数は切り捨てられ、さらにデータを圧縮するために量子化テーブルが使用されます。
量子化テーブルでは画質などを調整でき、端数が多く切り捨てられるほど、JPEG変換後の画質が劣化します。JPEGが非可逆圧縮である理由は、この段階で数値の端数が切り捨てられるためです。
DHT (Define Huffman Table)
このセグメントには、ハフマンテーブルというデータが格納されています。
ハフマンテーブルは、データをさらに圧縮するためのハフマン符号化を行うための領域です。
ハフマン符号は、データを出現頻度に基づいて分類し、出現頻度の低いデータを0と1で分岐するバイナリツリーの深層に配置します。そして、バイナリツリーの先頭から符号化を行うことでデータを圧縮するアルゴリズムです。
JPEGでは、このハフマン符号化が量子化とともに2段階の圧縮過程の一環として利用されます。
SOF (Start Of Frame)
SOFはJPEGファイルの種類や画像の横幅、縦幅など最も重要なパラメータを記録しており、
1つのJPEGファイルに必ず1つ存在します。
SOFにはマーカコードの違いにより、ffc0〜ffcfのうちffc4、ffc8、ffccの３つを除く13種類存在し、そのうちffc0とffc2の2種類が一般的に利用されます。
SOS (Start Of Scan)
SOSは、実際に画像として描画されるのに利用されるイメージデータの先頭にあるセグメントで、圧縮方式などの情報が格納されています。
このセグメント以降に存在するデータを、各セグメントで得られた値を用いてデコードすることで、実際に描画で用いるRGBの情報が取得可能となります。
イメージデータ
量子化されたブロックとハフマン符号でエンコードされた画像データが続きます。これが実際の画像のピクセルデータです。JPEGファイルでは画像をデータにする時に、一辺が8ピクセルの倍数の小さな画像に分割し、それぞれの画像をデータに変換します。
JPEGの利点と制限
利点
- 汎用性: ほとんどのブラウザー、ソフトウェア、アプリケーションで利用可能。
- データが小さい: ファイルサイズが小さいため、短時間で転送でき、オンラインで素早くアクセスし表示可能。GIFなどの可逆圧縮方式と比べて、JPEGは桁違いにサイズが小さい。
制限
- 非可逆圧縮: 圧縮後は元の品質には戻すことができなくる。
- 画質の低下: 大幅な圧縮をした場合は画質が低下する。エッジやラインがはっきりした画像は圧縮によってシャープさが失われる。
- ポスタリゼーション: 圧縮によってデータが多く失われると、画像がブロック状になる現象が起こる。
使い道
ファイルサイズが小さいため、Webでの画像の公開に適しています。画像や漫画をJPEGでWebに公開することで、読者がコンテンツに素早くアクセスでき、クラウドストレージの容量も圧迫しません。
GIFファイル
GIFファイルの概要
GIFは、比較的単純な画像向けに設計されたラスターファイル形式で、主にインターネットでの表示に使用されます。
各ファイルでは、ピクセルあたり最大8ビットがサポートされており、256色のインデックスカラーが使用可能です。
また、GIFファイルでは、画像またはフレームを結合して基本的なアニメーションを作成可能です。GIFは、CompuServe社が開発し、LZW圧縮の特許権を米UNISYS社が取得していたため、日本国内では2004年6月20日の特許失効まで利用料を払う必要がありました。
GIFファイルの構成要素
GIFのバージョンは、GIF87 GIF87a GIF89a の3つが存在しますが、
アニメーションの表現が可能で最も一般的な GIF89a について解説していきます。
GIFファイルは、データを種類ごとに分けてブロックという区画で管理します。
以下がGIFファイルを構成する主なブロックです。
- ファイルヘッダ (Header)
- 拡張画像ブロック (Graphic Control Extension)
- アプリケーション拡張ブロック (Application Extension)
- 画像ブロック (Image Block)
- トレーラー (Trailer)
ファイルヘッダ (Header)
ファイルヘッダには画像全体の情報が格納されています。
| フィールド名 | 内容 |
|---|---|
| Signature | GIFフォーマットであることを示す識別子 |
| Version | GIFのバージョンを示す識別子 |
| Logical Screen Width | 画像の横幅 |
| Logical Screen Height | 画像の縦幅 |
| Global Color Table Flag | 共通パレット存在フラグ |
| Color Resolution | 1画素のビット数 |
| Sort Flag | 共通パレットのソートフラグ |
| Size of Global Color Table | 共通パレットに定義した色の数 |
| Background Color Index | 背景色とする色の指定 |
| Pixel Aspect Ratio | ピクセルの縦横長さの比率 |
| Global Color Table | 共通パレットデータ (1色3バイトのデータが色の数だけ並ぶ) |
拡張画像ブロック (Graphic Control Extension)
拡張画像ブロックは、このブロックの直後に続くImage Dataブロックに影響し透過色の指定やアニメGIFの設定などをする拡張ブロックです。
| フィールド名 | 内容 |
|---|---|
| Extension Introducer | ブロックの識別子 |
| Graphic Control Label | 拡張ブロックの識別子 |
| Block Size | データの大きさ |
| Reserved | (未使用) |
| Disposal Method | 次のイメージを重ねるときの処理 |
| User Input Flag | ユーザー入力を受けるか |
| Transparent Color Flag | 透過処理をするか |
| Delay Time | イメージ描画までの待ち時間 |
| Transparent Color Index | 透過色とする色の指定 |
| Block Terminator | ブロックの終了を示す識別子 |
画像ブロック (Image Block)
| フィールド名 | 内容 |
|---|---|
| Image Separator | ブロックの識別子 |
| Image Left Position | このイメージの描画開始位置(左端からのずれ量) |
| Image Top Position | このイメージの描画開始位置(上端からのずれ量) |
| Image Width | 画像の横幅 |
| Image Height | 画像の縦幅 |
| Local Color Table Flag | 固有パレットがあるか |
| Interlace Flag | インターレースしているか |
| Sort Flag | 固有パレットがソートされているか |
| Reserved | (未使用) |
| Size of Local Color Table | 固有パレットに定義した色の数 |
| Local Color Table | 固有パレットデータ |
| LZW Minimum Code Size | 圧縮データに関する情報 |
| Block Size | Image Data の大きさ |
| Image Data | LZWで圧縮した画像データ |
| Block Terminator | ブロックの終了を示す識別子 |
アプリケーション拡張ブロック (Application Extension)
アプリケーション(ソフトウェア)が独自の情報を書き込み可能
| フィールド名 | 内容 |
|---|---|
| Extension Introducer | ブロックの識別子 |
| Extension Label | 拡張ブロックの識別子 |
| Block Size | データの大きさ |
| Application Identifier | アプリケーションの識別名 |
| Application Authentication Code | アプリケーションの識別コード |
| Block Size | Application Data の大きさ |
| Application Data | アプリケーションデータ アニメGIFの場合は繰り返し回数 |
| Block Terminator | ブロックの終了を示す識別子 |
トレーラー
ファイルの最後に1つだけ配置され、ファイルの終了を示しています。
| フィールド名 | 内容 |
|---|---|
| Trailer | GIFファイルの終端を示す識別子 |
GIFの利点と制限
利点
- アニメーション: GIFは簡単にアニメーションを表示可能。ループすることができ、簡単に作成・共有可能。
- 汎用性: ほとんどのブラウザー、ソフトウェア、アプリケーションで利用可能。
- サイズが小さい: 制限された色のパレットやLZW圧縮などの技術によりファイルサイズが小さい。
制限
- 色の制限: GIFは通常256色までの色パレットしかサポートしておらず、写真などの多彩な色を持つ画像には向いていません。
使い道
ウェブ上でのアニメーション広告、バナー、アイコンに使用されます。
TIFFファイル
TIFFファイルの概要
TIFFは、Microsoft社と現在は存在しないAldus社によって開発されたフォーマットです。
TIFFはモノクローム1ピクセル1バイトデータのみならず、1ピクセル2バイトデータ、1ピクセル4バイトデータ、さらに、複数の画像を1つのファイルに収録できる等、非常に汎用的なフォーマットです。
また、ジオリファレンス(デジタル画像ファイルを物理空間内の位置に関連付けること)に必要な位置情報も扱うことができるため、各種衛星データのフォーマットとして用いられます。
TIFFファイルの構造
ファイルヘッダ
ファイルヘッダは、TIFFファイルか否かの識別に使用されます。
データがモトローラ型なのか、インテル型なのかをここから読み取ります。
ファイルヘッダの最後は、IFDの場所を示すオフセット値が格納されています。
IFDはファイルヘッダの後のファイル内の任意の場所にあるため、ここに位置の情報を格納する必要があります。したがって、次に読み取る情報（IFD)は、このオフセット値の場所となります。
IFD (Image File Directory)
イメージファイルディレクトリは、画像の各種パラメ-ター、画像関連データ・カラーマップ・イメージデータへのポインタを格納した12バイトのデータエントリの集まりで、ファイルに対するディレクトリと同じような役目をしています。
IFDの各エントリの先頭には、データの型を示すタグと呼ばれる識別コードが保存されていて、IFDエントリのことをタグ付きポインタと呼ぶこともあります。
1つのIFDは1つのイメージデータに対応し、IFDはファイル中にいくつでも存在可能なので、TIFFはGIFのように1つのファイル中に複数のイメージデータを保存することも可能です。
しかし、通常は1つのIFDと1つのイメージデータが格納されています。
以下がIFDの構造となります。
| フィールド名 | size | 備考 |
|---|---|---|
| エントリカウント | 2 byte | 続くIFDエントリの数 |
| IFDエントリ | 12 byte | エントリカウント分IFDエントリが続く |
| ... | ... | ... |
| ... | ... | ... |
| IFDポインタ | 4 byte | 次のIFDのオフセット値 存在しなければ0 |
IFDエントリ
TIFFに記録されているエントリー（プロパティ）情報を表示する。
| 名前 | size | 内容 |
|---|---|---|
| タグ | 2 byte | データの識別コード |
| データの型 | 2 byte | 1~12 |
| カウントフィールド | 4 byte | データフィールドに含まれる値の数 |
| データフィールド or データポインタ |
4 byte | 各種データまたはバイト単位のオフセット値 |
タグ
IFDエントリのデータフィールドに含まれるデータ、またはデータポインタが指し示すデータの種類を表す識別コード
データの型
データの型を表すコードで、以下のような種類があります。
- 1…BYTE型(1バイト整数)
- 2…ASCII型(1バイトのASCII文字)
- 3…SHORT型(2バイト短整数)
- 4…LONG型(4バイト長整数)
- 5…RATIONAL型(8バイト分数、4バイトの分子とそれに続く4バイトの分母)
- 6…SBYTE型(1バイト符号付き整数)
- 7…UNDEFINED型(あらゆる1バイトデータ)
- 8…SSHORT型(2バイト符号付き短整数)
- 9…SLONG型(4バイト符号付き長整数)
- 10…SRATIONAL型(8バイト符号付き分数、4バイトの分子とそれに続く4バイトの分母)
- 11…FLOAT型(4バイト実数、IEEE浮動小数点形式)
- 12…DOUBLE型(8バイト倍精度実数、IEEE倍精度浮動小数点形式)
カウントフィールド
データフィールドに含まれる値の数を表しています。
この値にデータの型からわかるデータのバイト数をかけたものが、データフィールドのバイト数となります。 ASCII型のデータの場合、ASCII文字列は1バイト以上のnull文字(00H)で終了している必要があり、そのnull文字もカウント数に含まれます。
データフィールドまたはデータポインタ
データ型とカウントフィールドの値から求められるデータフィールドのサイズが4バイト以内ならば、データそのものが含まれ、4バイトよりも大きければ、データフィールドに対するポインタ(ファイルの先頭を基点としたオフセット値)が含まれます。
データポインタは4バイトのLONG型整数によるオフセット値なので、4バイト全てが有効だが、データフィールドの場合はデータが左詰めで保存され、必要な上位バイトだけが有効になり、下位バイトには0がパディングされます。
イメージデータ
イメージデータには、実際の画像データが格納されています。画像データは通常、ピクセルの並び（ラスタ形式）で表現されます。各ピクセルには、色情報や輝度情報など、画像の特性に応じたデータが含まれます。
TIFFの利点と制限
利点
- 可逆圧縮: 元の画像データを正確に再現可能であり画質の低下や劣化が起こりません。
- マルチファイル化： 複数の画像を1つのファイルにまとめることが可能。
制限
- ファイルサイズ： データ容量が、他の画像ファイルフォーマットに較べて格段に大きくなってしまいます。
- Web上での制限： Web上で使用する際は、他の画像ファイルフォーマットへ変換が必要です。
使い道
高画質写真、高解像度スキャン、コンテナファイルなどに使用されます。
PSDファイル
PSDファイルの概要
「PSD」は、アメリカのAdobe Systemsという会社によって提供されているAdobe Photoshopというグラフィックデザインの作成や編集で使われるアプリケーションで主に利用されるファイル形式であり、「Photoshop Data（又はDocument）」を略したものです。
PSDファイルの構造
PSDファイルは5つのセクションに分かれていてそれぞれ
- ファイルヘッダセクション
- カラーモードデータセクション
- イメージリソースセクション
- レイヤーとマスク情報セクション
- イメージデータセクション
という名称が付けられています。各セクションの先頭アドレスは管理されていないため、先頭から順に各セクションのサイズを解析することで、それぞれのセクションの先頭アドレスが割り出すことができます。
ファイルヘッダセクション
このセクションには以下の要素が含まれます。
| 名前 | 備考 |
|---|---|
| ファイル識別子 | ファイルがPSD形式であることを示すファイル識別子 |
| バージョン番号 | 常に 1 である事が期待される |
| 予約領域 | 予約領域でデータは存在しない |
| チャンネル数 | 範囲は 1~56 まで |
| キャンバスの縦幅 | (範囲は 1~30,000 まで) |
| キャンバスの横幅 | (範囲は 1~30,000 まで) |
| データビット数 | ビット深度(1, 8, 16, 32) |
| 色モード | ※詳細は後述 |
色モード
色空間の管理方法を示す。色空間番号と対応する色空間は下記の通り
| 色モード | 色空間 |
|---|---|
| 0 | Bitmap |
| 1 | Grayscale |
| 2 | Indexed |
| 3 | RGB |
| 4 | CMYK |
| 7 | Multichannel |
| 8 | Duotone |
| 9 | Lab |
カラーモードデータセクション
このセクションでは色に関する様々な情報を格納しています。
カラーモードが Indexed, Duotoneである場合に使用されるが、Indexed, Duotone以外はこのセクションのサイズは0となります。
イメージリソースセクション
このセクションではPSDファイルを編集するソフトウェアが使用する設定値などの情報を示します。
レイヤーとマスク情報セクション
レイヤー数、レイヤー内のチャンネル、ブレンド範囲、調整レイヤー キー、エフェクト レイヤー、マスクパラメータなど、レイヤーとマスクに関する情報が含まれています。
レイヤーまたはマスクがない場合、このセクションはゼロで埋められた 4byteフィールドで表されます。
イメージデータセクション
このセクションには全てのレイヤーを統合した画像情報が格納されています。
ピクセルの色情報は、Red, Green, Blueの順番で格納されています。
PSDの利点と制限
利点
- Adobe製品との相性: PSDはAdobe Photoshopのネイティブファイル形式なので、Adobeが開発するIllustratorやPremiere ProなどのAdobe製品に簡単に読み込み可能で連携がしやすい。
- 編集状態を保持可能: レイヤーやパスごとに編集や修正が可能で、Photoshopで作業中の状態をそのまま保存することが可能
制限
- ファイルサイズ: 場合によってはサイズが膨大(最大2GB)になる可能性がある
- Adobe製品を持っていないと開くことすら不可能
使い道
Webサイトのデザイン制作、写真の補正などに使用されます。
BMPファイル
BMPファイルの概要
BMP形式は、1990年代にMicrosoftがWindowsデバイスに依存しない画像データの表示方法として開発されました。
BMPはビットマップの略で、一般的に、「バンプ」と発音します。BMPは、様々な画面とデバイス間でデジタル画像の解像度を維持できるように、MicrosoftがWindows用に開発したファイル形式です。カラーまたは白黒の2D画像を保存可能です。
現在では、BMPファイルはWindowsデバイス専用ではなく、多くのMacやAndroidデバイスが対応するようになりました。
BMPファイルの構造
BMPファイルは以下のようにファイル構造がシンプルなのが特徴です。
| 名称 | 内容 |
|---|---|
| ファイルヘッダ | ファイル情報(画像の色数・縦幅・横幅など) |
| イメージデータ | 画像データの情報が格納されている |
ファイルヘッダ
| offset | size | 概要 | 詳細 |
|---|---|---|---|
| 0 | 2byte | フォーマット種類 | BMPなら0x42、0x4d |
| 2 | 4byte | ファイルサイズ | 単位[byte] |
| 6 | 4byte | 予約領域 | 将来の拡張用領域 |
| 10 | 4byte | ヘッダサイズ | この値からデータ部の先頭位置がわかる |
| 14 | 4byte | 情報ヘッダのサイズ | 40[byte] |
| 18 | 4byte | 画像の横幅 | 単位[px] |
| 22 | 4byte | 画像の縦幅 | 単位[px] |
| 26 | 2byte | プレーン数 | 常に1 |
| 28 | 2byte | 1画素の色数 | 単位[bit]でRGBカラーの場合: 24 グレースケールの場合: 8 |
| 30 | 4byte | 圧縮形式 | |
| 34 | 4byte | 圧縮サイズ | 単位[byte] |
| 38 | 4byte | 水平解像度 | 単位[ppm]=[px/m] |
| 42 | 4byte | 垂直解像度 | 単位[ppm]=[px/m] |
| 46 | 4byte | 色数 | 0なら全色使用 |
| 50 | 4byte | 重要色数 | 0なら全色使用 |
イメージデータ
色数が24[bit]（RGBカラー）の場合は次のようになります。
| offset | size | 説明 | 補足 |
|---|---|---|---|
| 54 | 1 | (0, 0)の画素値 | Blueの値(0~255) |
| 55 | 1 | (0, 0)の画素値 | Greenの値(0~255) |
| 56 | 1 | (0, 0)の画素値 | Redの値(0~255) |
| 57 | 1 | (1, 0)の画素値 | Blueの値(0~255) |
| 58 | 1 | (1, 0)の画素値 | Greenの値(0~255) |
| 59 | 1 | (1, 0)の画素値 | Redの値(0~255) |
| 60 | 1 | (2, 0)の画素値 | Blueの値(0~255) |
| 61 | 1 | (2, 0)の画素値 | Greenの値(0~255) |
| 62 | 1 | (2, 0)の画素値 | Redの値(0~255) |
| ︙ | ︙ | ︙ | ︙ |
BMPの利点と制限
利点
- 多くのWebブラウザーとソフトウェアに対応してます。
- デバイスに依存せず、様々なデバイスに保存し異なる画面で表示しても品質は劣化しません。
- 非常に汎用性が高く、複数の色深度、プロファイル、アルファチャンネルを扱うことが可能。
- データの圧縮にも対応しています。
制限
- 非圧縮のBMPは、JPEGやPNGと比べてはるかにファイルサイズが大きく、共有しにくくなることがあります。故に、Webサイトでの使用にも不向きで、空き容量の少ないハードディスクでは保存できないこともあります。
- BMPに格納されるのはRGB画像のみである点も、主にCMYKで作業する場合には注意が必要です。
使い道
高画質デジタル画像の保管と表示等に使用されます。
SVGファイル
SVGファイルの概要
SVGは、Scalable Vector Graphics (拡大縮小可能なベクター画像) の略称です。
SVGは線をつないだ図形、テキスト、ビットマップイメージを組み合わせた画像を表すデータ形式です。XMLベースの為、ウェブブラウザでソースを閲覧でき、テキストエディタ等で編集できます。
また、HTMLとの親和性により、ハイパーリンクを埋め込んだり、JavaScript 等と連携させることも可能です。
SVGファイルの構造
SVGはXML形式で記述されるため、以下のソースを例に説明します。
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
(画像データ)
</svg>
| フィールド名 | 内容 |
|---|---|
| xmlns | XMLの名前空間のURIを指定する属性 XML名前空間とはXMLの要素を一意に識別するための仕組み |
| width | 画像の横幅 |
| height | 画像の縦幅 |
| viewBox | width, heightの値で決まるビューポートに対し座標を定める |
図形の描画
SVG形式で描画できる基本的な図形をいくつか紹介します。
このコードを上記の(画像データ内)に記述することで図形を描画可能。
直線
<line x1="10" y1="30" x2="190" y2="30" stroke="black" stroke-width="2" />
| フィールド名 | 内容 |
|---|---|
| x1 | 始点のx座標 |
| y1 | 始点のy座標 |
| x2 | 始点のx座標 |
| y2 | 始点のy座標 |
| stroke | 直線の色 |
| stroke-width | 直線の太さ |
長方形
<rect x="5" y="5" width="30" height="30" stroke="black" fill="#fff" stroke-width="2" />
| フィールド名 | 内容 |
|---|---|
| x1 | 始点(左上)のx座標 |
| y1 | 始点(左上)のy座標 |
| x2 | 始点(右下)のx座標 |
| y2 | 始点(右下)のy座標 |
| stroke | 直線の色 |
| fill | 塗りつぶす色 |
| stroke-width | 直線の太さ |
円
<circle cx="20" cy="20" r="15" stroke="black" fill="#fff" stroke-width="2" />
| フィールド名 | 内容 |
|---|---|
| cx | 中心のx座標 |
| cy | 中心のy座標 |
| r | 半径 |
| stroke | 直線の色 |
| fill | 塗りつぶす色 |
| stroke-width | 直線の太さ |
SVGの利点と制限
利点
- 拡大や縮小表示の際に画質が荒くならず解像度を一定に保つことができます。
- CSSによるアニメーション表現が可能。
制限
- 対応していないブラウザがあります。
使い道
2次元のグラフィック、グラフ、イラストをWebサイトで表示する場合に使用されます。
RAWファイル
RAWファイルの概要
RAWデータとは、デジタルカメラ、デジタル一眼レフカメラ、などに搭載されている写真編集の記録形式です。RAWデータ形式では、カメラ内部で画像に処理を行なわずデータを非圧縮または低圧縮率で保存します。
デジタルカメラには、レンズから入射した光をデジタルデータに変換するイメージセンサーという部品が搭載されています。内部のイメージセンサーが読み取った光の情報を、そのまま記録したものがRAWデータです。
通常、RAWデータはJPEGに変換してカメラ内のメモリーに保存されます。JPEGは見た目を大きく損なうことなくデータを圧縮することが可能ですが、不可逆圧縮なので、圧縮前に比べて画像の精度は劣化してしまいます。RAWデータは処理前のデータが記録されているため、JPEGに比べて高精度な画像の生成が可能です。
RAWデータは光の強弱についての情報のため、そのままでは画像として見ることはできません。そのため、RAWデータは一度パソコンにデータを取り込み、画像ファイルへの変換処理を行なう必要があります。この工程を「RAW現像処理」と呼びます。
RAWファイルの構造
| フィールド名 | 形式 | 備考 |
|---|---|---|
| RAWヘッダ部 | text | カメラ設定情報 |
| サムネイル画像部 | jpeg | 160×120程度 |
| 再生用JPEG画像部 | jpeg | フルサイズjpegの1/2程度 |
| RAWデータ部 | raw | イメージセンサーが捉えた光の情報 |
RAWの利点と制限
利点
- カメラのセンサーが捉えた細部がすべて記録されるため高品質のファイルを得ることが可能。
- ホワイトバランスが撮影後に自由に変更可能。
制限
- データのサイズが大きくなってしまいます。
- RAWはカメラメーカーごとに独自の規格となっているので、現像には専用のソフトが必要です。
使い道
一眼レフカメラ、デジタルカメラ内の写真のデータなどに使用されます。
参考にしたサイト
PNG イメージを自力でパースしてみる
https://darkcrowcorvus.hatenablog.jp/entry/2017/02/12/235044
JPEGファイルの構造
https://hp.vector.co.jp/authors/VA032610/JPEGFormat/StructureOfJPEG.htm
JPEGファイルについて
https://www.adobe.com/jp/creativecloud/file-types/image/raster/jpeg-file.html
GIF画像ファイル フォーマット - 略して仮。
https://menyukko.ifdef.jp/cauldron/dtgifformat.html
ファイルフォーマット(CEOS, TIFF, GeoTIFF, BMP, RAW)
http://rs.aoyaman.com/seminar/about3.html
CGファイル概説 第5章 第2節 その1
http://www.snap-tck.com/room03/c02/cg/cg05_02.html
【解説】PSDファイルの仕様（基本構造編）
https://qiita.com/vram/items/2632cb9ed2dec9430f59
PSD - Photoshop 画像ファイル形式 - File Format Docs
https://docs.fileformat.com/ja/image/psd/
BMPファイルについて - Adobe
https://www.adobe.com/jp/creativecloud/file-types/image/raster/bmp-file.html
BMP画像のファイル構造（ヘッダ部・データ部）
https://algorithm.joho.info/image-processing/bmp-file-data-header/
SVGファイルについて - Adobe
https://www.adobe.com/jp/creativecloud/file-types/image/vector/svg-file.html
SVG入門
https://www.tohoho-web.com/ex/svg.html
RAWデータ - ICT用語集
https://www.ntt-west.co.jp/business/glossary/words-00247.html
RAWデータとは | RAW現像の基本
https://lrlab.exblog.jp/14195828/
弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。
また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。