{"componentChunkName":"component---src-templates-post-template-js","path":"/posts/image-file-format-basics","result":{"data":{"markdownRemark":{"id":"2651712b-8f4c-58bb-a3e2-c2e813ceb2fd","html":"

画像・動画・音声処理および XR 一人アドベントカレンダー 2 日目の記事です。

\n

はじめに

\n

画像ファイルフォーマットの基本について調べたことをまとめます。

\n

画像ファイルフォーマットの分類

\n

画像ファイルフォーマットについては、Wikipedia の以下の 4 つの記事がとっかかりとして良いです。

\n\n

最近よく見る画像ファイルフォーマットを分類すると、以下のようになります。

\n\n

順に概要を見ていきます。

\n

ビットマップ画像 (ラスター形式)

\n

ピクセル単位で色の情報を持っているのがビットマップ画像です。

\n

PNG・JPEG・GIF の比較については、以下の記事が参考になります。

\n\n

PNG (Portable Network Graphics)

\n

特徴

\n\n

なお、「フルカラー - Wikipedia」によると、24 bit カラーをフルカラーと呼ぶことが多いとのことです。

\n
\n

24 ビットカラー（16,777,216 色）、トゥルーカラー（truecolor, true colors）。(中略) 現代のパソコン業界では、トゥルーカラーのみをフルカラーと呼ぶことが多い。

\n
\n

JPEG (Joint Photographic Experts Group)

\n

特徴

\n\n

GIF (Graphics Interchange Format)

\n

特徴

\n\n

WebP (ウェッピー)

\n

WebP は、Google が開発した圧縮率の高い画像形式です。

\n

特徴

\n\n

参考: WebP とその他画像形式の違いとは？3 つのメリットと変換方法解説

\n

ベクター画像 (ベクター形式)

\n

画像を幾何学的な図形として表現するのがベクター形式です。

\n

SVG (Scalable Vector Graphics)

\n

ベクター画像と言えば SVG だと思います。

\n

SVG は、XML ベースのベクター画像形式です。

\n

その他、一緒に知っておきたいファイルフォーマット

\n

PDF (Portable Document Format)

\n

PDF は、Adobe が開発した文書フォーマットです。

\n

現在は ISO 32000-1 として標準化されています。

\n

PDF 自体は画像ではないです (画像に分類されているケースもあります) が、内部にベクター画像やラスター画像を保持することもできます。

\n

参考: Portable Document Format - Wikipedia

\n

画像ファイルをよく見てみる

\n

さて、これだけで終わっては面白くないので、画像ファイルをよく見てみたりしようと思います。

\n

PNG

\n

「File:Lenna (test image).png - Wikipedia」からレナ画像を取得します。

\n
curl https://upload.wikimedia.org/wikipedia/en/7/7d/Lenna_%28test_image%29.png > Lenna.png
\n

hexdump で見てみると、以下のようになります。

\n
$ hexdump -C Lenna.png | head\n00000000  89 50 4e 47 0d 0a 1a 0a  00 00 00 0d 49 48 44 52  |.PNG........IHDR|\n00000010  00 00 02 00 00 00 02 00  08 02 00 00 00 7b 1a 43  |.............{.C|\n00000020  ad 00 00 00 01 73 52 47  42 00 ae ce 1c e9 00 07  |.....sRGB.......|\n00000030  3a a1 49 44 41 54 78 da  ec e1 5d 92 6d 5b 92 1d  |:.IDATx...].m[..|\n00000040  e6 8d e1 ee 73 ae b5 23  e2 9c 7b 33 ab 20 08 e4  |....s..#..{3. ..|\n00000050  8b 5a 20 a3 8c 46 51 a4  f1 4f 25 a3 99 3a 23 a3  |.Z ..FQ..O%..:#.|\n00000060  00 ea 55 0d 50 e3 d4 00  51 a4 c1 00 92 48 20 ab  |..U.P...Q....H .|\n00000070  b2 f2 de 7b 22 f6 5e 6b  4e 77 1f 4a b5 03 f9 7d  |...{".^kNw.J...}|\n00000080  fc d7 ff af ff 27 80 c2  09 6d b7 0b af b4 c7 a1  |.....'...m......|\n00000090  24 a6 77 5e ae a3 b4 3b  7f f8 e3 bd 92 bd 16 c6  |$.w^...;........|
\n

「Portable Network Graphics - Wikipedia」によると PNG の先頭 8 バイトは

\n
\n

「89 50 4E 47 0D 0A 1A 0A」

\n
\n

とのことですが、確かにその通りになっています。

\n

なお、「vim でバイナリを編集する - Qiita」という記事を参考に、vim -b と :%!xdd でバイナリを見てみると、最初の 10 行は以下のようになります。

\n
00000000: 8950 4e47 0d0a 1a0a 0000 000d 4948 4452  .PNG........IHDR\n00000010: 0000 0200 0000 0200 0802 0000 007b 1a43  .............{.C\n00000020: ad00 0000 0173 5247 4200 aece 1ce9 0007  .....sRGB.......\n00000030: 3aa1 4944 4154 78da ece1 5d92 6d5b 921d  :.IDATx...].m[..\n00000040: e68d e1ee 73ae b523 e29c 7b33 ab20 08e4  ....s..#..{3. ..\n00000050: 8b5a 20a3 8c46 51a4 f14f 25a3 993a 23a3  .Z ..FQ..O%..:#.\n00000060: 00ea 550d 50e3 d400 51a4 c100 9248 20ab  ..U.P...Q....H .\n00000070: b2f2 de7b 22f6 5e6b 4e77 1f4a b503 f97d  ...{".^kNw.J...}\n00000080: fcd7 ffaf ff27 80c2 096d b70b afb4 c7a1  .....'...m......\n00000090: 24a6 775e aea3 b43b 7ff8 e3bd 92bd 16c6  $.w^...;........
\n

PNG のバイナリを Vim などで編集するのは、圧縮されていたりするためとても難しいです。

\n

Python の Pillow などのライブラリを使うと 8bit ずつの RGB などを簡単に取得できたり編集できたりしますが、内部で色んなことをやってくれているんだなと実感します。

\n

そのあたりについて、以下の記事は自前でいろいろ処理していてとても面白いです。

\n\n

SVG

\n

「SVG 入門 - とほほの WWW 入門」を参考に、ちょっとした SVG ファイルを作ってみます。

\n

SVG はただのテキストファイルなので、エディタで作ることも可能です。

\n

以下のような SVG ファイルを作成すると…

\n
<?xml version=\"1.0\"?>\n<svg xmlns=\"http://www.w3.org/2000/svg\" x=\"0\" y=\"0\" width=\"200\" height=\"200\">\n  <circle cx=\"100\" cy=\"100\" r=\"100\" stroke=\"black\" fill=\"#fff\" stroke-width=\"1\" />\n</svg>
\n

\"svg_circle.svg\"

\n

円が表示されました。

\n

PDF

\n

最後に、PDF のファイルフォーマットについて面白い記事をいくつか見かけたので、リンクを貼っておきます。

\n\n

おわりに

\n

以上、画像ファイルフォーマットの基本について調べたり、少し中身を見てみました。

\n

画像ファイルをバイナリレベルで見るようなことはなかなかないと思いますが、少し覗いてみようとするだけでも結構勉強になりました。

\n

関連して、画像処理のアルゴリズムをまとめている良さそうなサイトも見かけたので、リンクを貼っておきます。

\n","fields":{"slug":"/posts/image-file-format-basics","tagSlugs":["/tag/media/"],"autoRecommendPosts":["audio-video-streaming-data-basics","command-collection-for-binary-files","computer-graphics-first-step","media-and-xr-lonely-advent-calendar"]},"frontmatter":{"date":"2021-12-01T15:41:25.518Z","description":"画像ファイルフォーマットの基本について調べたことをまとめます。","tags":["media"],"title":"画像ファイルフォーマットの基本","socialImage":null,"recommendPosts":null}}},"pageContext":{"slug":"/posts/image-file-format-basics"}},"staticQueryHashes":["251939775","3942705351","401334301"]}