とほほのGIFフォーマット入門

カウンターを作成する際にちょっとGIFファイルの仕様について勉強したので、紹介します。初心者にとってはなんのこっちゃわからないし、上級者にとっては全然情報が足りないのですが、GIF仕様書を読む際の参考程度に眺めて見てください。

GIFの概要

GIFとは Graphics Interchange Format の略です。米国のパソコン通信 CompuServe で画像データを交換するために標準化されたフォーマットです。GIF仕様のバージョンは3種類あり、それぞれ以下の機能をサポートしています。

機能＼バージョン	GIF87	GIF87a	GIF89a
通常画像	○	○	○
インタレースGIF	×	○	○
透過GIF	×	×	○
GIFアニメーション	×	×	○

GIFの特許に関する注意

GIFでは、常にUnisys社の特許問題が絡んできますので、「GIFの特許問題について」を参照しておいてください。

GIF Format(GIF89a)

すべてのGIFファイルは次のようなフォーマットをしている。

GIF Header(?B)

Block(?B)

Trailer(1B) = 0x3b

GIF Header(? Bytes)

以下参照。

Block(? Bytes)

以下に述べるブロックの並び。最初の1～2バイトでどのブロックかを判別する。

Trailer(1 Byte)

Blockの終わりを示す。0x3b の固定値。

GIF Header

Signature(3B) = "GIF"
Version(3B) = "87a" or "89a"
Logical Screen Width(2B)
Logical Screen Height(2B)
GCTF(1b)	CR(3b)	SF(1b)	SGCT(3b)
Background Color Index(1B)
Pixel Aspect Ratio(1B)
Global Color Table(0～255×3B)

Signature(3 Bytes): 0x47 0x49 0x46 の固定値。これはアスキーの "GIF" となる。
Version(3 Bytes): GIF87aの場合は 0x38 0x37 0x61、GIF89aの場合は 0x38 0x39 0x61 の固定値。これらはそれぞれアスキーの "87a", "89a" となる。
Logical Screen Width(2 Bytes): GIF画像全体の横幅。横幅が 0x1234 の場合は 0x34 0x12 と格納される。
Logical Screen Height(2 Bytes): GIF画像全体の高さ。高さが 0x1234 の場合は 0x34 0x12 と格納される。
Global Color Table Flag(1 Bit): Global Color Tableが存在する場合は1、存在しない場合は0。
Color Resolution(3 Bits): この値(0～7)に1を足した値が、画像1ドットを表わすのに必要なビット数となる。
Sort Flag(1 Bit): Global Color Tableがソートされている場合は1、ソートされていない場合は0。
Size of Global Color Table(3 Bits): この値(0～7)に1を足した値をnとして、2のn乗がGlobal Color Tableの個数となる。
Background Color Index(1 Byte): 背景色のインデックス。
Pixel Aspect Ratio(1 Byte): ピクセルの縦横比。この値(1～255)をnとし、(n+15)/64 が実際の比率となる。値0はこの比率情報が与えられていないことを意味する。
Global Color Table(0～255×3 Bytes): Global Color Table Flagが1の場合に存在する。1つの色情報につきRGBの3バイトずつ、2の(Size of Global Color Table)乗個並ぶ。

Block: Image Block

Image Separator(1B) = 0x2c
Image Left Position(2B)
Image Top Position(2B)
Image Width(2B)
Image Height(2B)
LCTF(1b)	IF(1b)	SF(1b)	R(2b)	SLCT(3b)
Local Color Table(0～255×3B)
LZW Minimum Code Size(1B)

Block Size(1B)

Image Data(nB)
　

Block Terminator(1B) = 0x00

Image Separator(1 Byte): このブロックがImage Blockであることを示す。0x2c の固定値。
Image Left Position(2 Bytes): GIF画像全体に対するこのイメージブロックの左端相対位置。相対位置が 0x1234 の場合は 0x34 0x12 と格納される。
Image Top Position(2 Bytes): GIF画像全体に対するこのイメージブロックの上端さ相対位置。相対位置が 0x1234 の場合は 0x34 0x12 と格納される。
Image Width(2 Bytes): このイメージブロックの横幅。横幅が 0x1234 の場合は 0x34 0x12 と格納される。
Image Height(2 Bytes): このイメージブロックの縦幅。縦幅が 0x1234 の場合は 0x34 0x12 と格納される。
Local Color Table Flag(1 Bit): Local Color Tableが存在する場合は1、存在しない場合は0。
Interlace Flag(1 Bit): インタレースする場合は1、しない場合は0。
Sort Flag(1 Bit): Local Color Tableがソートされている場合は1、ソートされていない場合は0。
Reserved(2 Bits): 未使用。
Size of Local Color Table(3 Bits): この値(0～7)に1を足した値をnとして、2のn乗がLocal Color Tableの個数となる。
Local Color Table(0～255×3 Bytes): Global Color Table Flagが1の場合に存在する。1つの色情報につきRGBの3バイトずつ、2の(Size of Global Color Table)乗個並ぶ。
LZW Minimum Code Side(1 Byte): LZWコードの最小ビット数。
Block Size(1 Byte): Image Dataのバイト数(1～255)を表わす値。0はBlock Terminatorを表わす。
Image Data(? Bytes): Block Size分のイメージデータ。LZWアルゴリズム(詳細未稿)による。
Block Terminator(1 Byte): ブロック並びの終わりを表わす。0x00 固定値。

Block: Graphic Control Extension

Extension Introducer(1B) = 0x21

Graphic Control Label(1B) = 0xf9

Block Size(1B) = 0x04
R(3b)	DM(3b)	UIF(1b)	TCF(1b)
Delay Time(2B)
Transparent Color Index(1B)

Block Terminator(1B) = 0x00

Extension Introducer(1 Byte): 拡張ブロックであることを示す 0x21 固定値。
Graphic Control Label(1 Byte): このブロックがGraphic Control Extensionであることを示す 0xf9 固定値。
Block Size(1 Byte): ブロックサイズ。0x04 固定値。
Reserved(3 Bits): 未使用。
Disposal Mothod(3 Bits): 未稿。
User Input Flag(1 Bit): 未稿。
Transparent Color Flag(1 Bit): 透過処理を行う場合は1、行わない場合は0。
Delay Time(2 Bytes): 表示する際の遅延時間(100分の1秒単位)。
Transparent Color Index(1 Byte): 透過処理する色のインデックス。
Block Terminator(1 Byte): ブロック並びの終わりを表わす。0x00 固定値。

Block: Comment Extension

Extension Introducer(1B) = 0x21

Comment Label(1B) = 0xfe

Block Size(1B)

Comment Data(nB)
　

Block Terminator(1B) = 0x00

Extension Introducer(1 Byte): 拡張ブロックであることを示す 0x21 固定値。
Comment Label(1 Byte): このブロックがComment Extensionであることを示す 0xfe 固定値。
Block Size(1 Byte): Comment Dataのバイト数(1～255)を表わす値。0はBlock Terminatorを表わす。
Comment Data(n Byte): コメントデータ。
Block Terminator(1 Byte): ブロック並びの終わりを表わす。0x00 固定値。

Block: Plain Text Extension

Extension Introducer(1B) = 0x21

Plain Text Label(1B) = 0x01

Block Size #1(1B) = 0x0c

Text Grid Left Position(2B)

Text Grid Top Position(2B)

Text Grid Width(2B)

Text Grid Height(2B)

Character Cell Width(1B)

Character Cell Height(1B)

Text Foreground Color Index(1B)

Text Background Color Index(1B)

Block Size(1B)

Plain Text Data(nB)
　

Block Terminator(1B) = 0x00

Extension Introducer(1 Byte): 拡張ブロックであることを示す 0x21 固定値。
Plain Text Label(1 Byte): このブロックがPlain Text Extensionであることを示す 0x01 固定値。
Block Size #1(1 Byte): ブロックのサイズ。0x0c の固定値。
Text Grid Left Position(2 Bytes): 未稿。
Text Grid Top Position(2 Bytes): 未稿。
Text Grid Width(2 Bytes): 未稿。
Text Grid Height(2 Bytes): 未稿。
Character Cell Width(1 Bytes): 未稿。
Character Cell Height(1 Bytes): 未稿。
Text Foreground Color Index(1 Bytes): 未稿。
Text Background Color Index(1 Bytes): 未稿。
Block Size #2(1 Byte): Plain Text Dataのバイト数(1～255)を表わす値。0はBlock Terminatorを表わす。
Plain Text Data(n Byte): テキストデータ。
Block Terminator(1 Byte): ブロック並びの終わりを表わす。0x00 固定値。

Block: Application Extension

Extension Introducer(1B) = 0x21

Extension Label(1B) = 0xff

Block Size #1(1B) = 0x0b

Application Identifier(8B)

Application Authentication Code(3B)

Block Size #2(1B)

Application Data(nB)
　

Block Terminator(1B) = 0x00

Extension Introducer(1 Byte): 拡張ブロックであることを示す 0x21 固定値。
Extension Label(1 Byte): このブロックがApplication Extensionであることを示す 0xff 固定値。
Block Size #1(1 Byte): ブロックのサイズ。0x0b の固定値。
Application Identifier(8 Bytes): 未稿。
Application Authentication Code(3 Bytes): 未稿。
Block Size #2(1 Byte): Application Dataのバイト数(1～255)を表わす値。0はBlock Terminatorを表わす。
Application Data(n Byte): アプリケーションデータ。
Block Terminator(1 Byte): ブロック並びの終わりを表わす。0x00 固定値。

一般的なGIF87a

GIF Header

Image Block

Trailer

一般的な GIF87a のファイルは、Block として、Image Block のみが使用される。

一般的なGIF89a

GIF Header

Graphic Control Extension

Image Block

Trailer

一般的な GIF89a のファイルは、Graphic Control Extension と Image Block が使用される。

インタレースGIF

インタレースGIFは、Image Block の Interlaced Flag がオン(1)になっているものを言う。この場合、GIF画像の横線(走査線)に対して、1番目に1,9,17..本目を、2番目に5,13,21..本目を、3番目に3,7,11..本目を、最後に2,4,6..本目を格納する。これにより、1番目の捜査だけでもGIF画面全体の大まかなイメージを表示することができる。

透過GIF

透過GIFは、Graphic Control Extension の Transparent Color Flag がオン(1)になっているものをいい、Transparent Color Index で示された Color Table の色が透明色として処理される。

GIFアニメーション

GIF Header

Application Extension

Graphic Control Extension

Image Block

Graphic Control Extension

Image Block

Trailer

一般的なGIFアニメーションは、GIF Header の後に Application Extension があり、その後に Graphic Control Extension と Image Block が交互に連続する。

Application Extension は Netscape によって拡張された Loop Control として使用され、Application Identifier には "NETSCAPE"、Application Authentication Code には "2.0" の文字が格納される。Application Data として1バイトの 0x01 および2バイトのループ回数(0～65535)が、例えばループ回数が5回の場合は 0x01 0x05 0x00 の3バイトが格納される。

GIFの連結

「とほほのカウンター」で用いているGIFファイルの連結作業は、GIF Headerの後にGraphic Control ExtensionとImage Blockの組を連結個数分並べています。もちろん最後にはTrailerをつけます。この際に、Logical Screen WidthをGIFの各横幅×連結個数分とり、Image Left PositionをGIFの各横幅分ずらしながら並べるのがミソです。

通常のGIF連結に対して、GIFアニメーションをサポートしているブラウザでしか表示できないという難点がありますが、Unisys社の特許に抵触しないという利点があります。

GIF関連ツール

GIF関連のツールについては「画像/音/動画」、および「厳選ツール集」を参照。

この文書を読むにあたっての注意

「未稿」部分も多いですし、一夜漬けで勉強したことなので、いろいろ間違いがあるかもしれません。あくまで参考程度に使用ください。

わかりやすさ優先のため、仕様の原文と若干名前を変更しています。以下のようにと考えるとわかりやすいと思います。

GIF Header = Header
　　　　　　+ Logical Screen Descriptor
　　　　　　+ Global Color Table
Image Block = Image Descriptor
　　　　　　+ Local Color Table
　　　　　　+ Table Based Image Data

最終更新：1998年1月18日版

http://www.tohoho-web.com/wwwgif.htm