xref: /aosp_15_r20/external/giflib/doc/whatsinagif/bits_and_bytes.html (revision 324bb76b8d05e2a05aa88511fff61cf3f9ca5892) 
1*324bb76bSAndroid Build Coastguard Worker<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2*324bb76bSAndroid Build Coastguard Worker<html>
3*324bb76bSAndroid Build Coastguard Worker<head>
4*324bb76bSAndroid Build Coastguard Worker<title>What's In A GIF - Bits and Bytes</title>
5*324bb76bSAndroid Build Coastguard Worker<script type="text/javascript"></script>
6*324bb76bSAndroid Build Coastguard Worker<link rel="stylesheet" href="../proj.css" />
7*324bb76bSAndroid Build Coastguard Worker<style type="text/css">
8*324bb76bSAndroid Build Coastguard Worker.byte {font-family: Courier, fixed;
9*324bb76bSAndroid Build Coastguard Worker	padding: .2em}
10*324bb76bSAndroid Build Coastguard Worker.gif_header {background-color: #f9E89D}
11*324bb76bSAndroid Build Coastguard Worker.gif_screen {background-color: #C8DBD9}
12*324bb76bSAndroid Build Coastguard Worker.gif_color {background-color: #E1E1E1}
13*324bb76bSAndroid Build Coastguard Worker.gif_graphic {background-color: #F9EB9D}
14*324bb76bSAndroid Build Coastguard Worker.gif_imgdesc {background-color: #C2D1DC}
15*324bb76bSAndroid Build Coastguard Worker.gif_imgdata {background-color: #D0C4C4}
16*324bb76bSAndroid Build Coastguard Worker.gif_trailer {background-color: #f9E89D}
17*324bb76bSAndroid Build Coastguard Worker.gif_ext {background-color: #D0CFAE}
18*324bb76bSAndroid Build Coastguard Worker#global_color_size {margin-left: auto; margin-right:auto; border:1px solid black;}
19*324bb76bSAndroid Build Coastguard Worker#global_color_size td {text-align:center;}
20*324bb76bSAndroid Build Coastguard Worker</style>
21*324bb76bSAndroid Build Coastguard Worker</head>
22*324bb76bSAndroid Build Coastguard Worker<body>
23*324bb76bSAndroid Build Coastguard Worker<table width='100%' cellpadding='0' summary='Canned page header' bgcolor="#ddd">
24*324bb76bSAndroid Build Coastguard Worker<tr>
25*324bb76bSAndroid Build Coastguard Worker<td><h2>What's In A GIF</h2></td>
26*324bb76bSAndroid Build Coastguard Worker<td align="center"><img src="../giflib-logo.gif"></td>
27*324bb76bSAndroid Build Coastguard Worker<td align="right">(Bits and bytes)</td>
28*324bb76bSAndroid Build Coastguard Worker</tr>
29*324bb76bSAndroid Build Coastguard Worker</table>
30*324bb76bSAndroid Build Coastguard Worker
31*324bb76bSAndroid Build Coastguard Worker<div id="body">
32*324bb76bSAndroid Build Coastguard Worker<div style="text-align:center; margin-top: 10px; padding-top: 10px; border-top: #cecece 1px solid">
33*324bb76bSAndroid Build Coastguard Worker<p><a href="index.html">Back to the What's In A GIF index page.</a></p>
34*324bb76bSAndroid Build Coastguard Worker</div>
35*324bb76bSAndroid Build Coastguard Worker
36*324bb76bSAndroid Build Coastguard Worker<p>The authority on the content of GIFs is the <a
37*324bb76bSAndroid Build Coastguard Workerhref="../gif89.txt">GIF89a specification</a>. Originally developed at
38*324bb76bSAndroid Build Coastguard WorkerCompuServe in the late 1980s, it is now a W3C standard.</p>
39*324bb76bSAndroid Build Coastguard Worker
40*324bb76bSAndroid Build Coastguard Worker<p>A GIF file is made up of a sequence of data blocks.  The first two
41*324bb76bSAndroid Build Coastguard Workerblocks are fixed length and fixed format. Later ones are variable
42*324bb76bSAndroid Build Coastguard Workerlength but self-describing; they consisting of a byte identifying the block
43*324bb76bSAndroid Build Coastguard Workertype, followed by a payload length byte, followed by payload.</p>
44*324bb76bSAndroid Build Coastguard Worker
45*324bb76bSAndroid Build Coastguard Worker<p>The following railroad diagram shows all of the different types of
46*324bb76bSAndroid Build Coastguard Workerblocks and where they can be in the file. Every path following the
47*324bb76bSAndroid Build Coastguard Workerarrows corresponds to a valid block sequence. The large middle
48*324bb76bSAndroid Build Coastguard Workersecction, in particular, can be repeated any number of times.</p>
49*324bb76bSAndroid Build Coastguard Worker
50*324bb76bSAndroid Build Coastguard Worker<p style="text-align:center"><img src="gif_file_stream.gif" alt="GIF file stream diagram" style="border: 1px solid black" / WIDTH="700" HEIGHT="220"></p>
51*324bb76bSAndroid Build Coastguard Worker
52*324bb76bSAndroid Build Coastguard Worker<p>We will learn more by walking through a sample GIF file. You can
53*324bb76bSAndroid Build Coastguard Workersee the sample file and its corresponding bytes below. </p>
54*324bb76bSAndroid Build Coastguard Worker
55*324bb76bSAndroid Build Coastguard Worker<table>
56*324bb76bSAndroid Build Coastguard Worker<tr>
57*324bb76bSAndroid Build Coastguard Worker<td style="text-align:center; vertical-align: top; padding: 5px; width:20%"><h3>Actual Size</h3><img src="sample_1.gif" alt="sample gif, actual size" title="Actual Size" style="padding: 20px" / WIDTH="10" HEIGHT="10"><br/>(10x10)</td>
58*324bb76bSAndroid Build Coastguard Worker<td style="text-align:center; vertical-align: top; padding: 5px;; width:20%"><h3>Enlarged</h3><img src="sample_1_enlarged.gif" alt="sample gif, enlarged" title="Enlarged" / WIDTH="100" HEIGHT="100"><br/>(100x100)</td>
59*324bb76bSAndroid Build Coastguard Worker<td style="vertical-align: top; padding: 5px; width:60%"><h3>Bytes</h3>
60*324bb76bSAndroid Build Coastguard Worker
61*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_header"> 47 </span>
62*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_header"> 49 </span>
63*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_header"> 46 </span>
64*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_header"> 38 </span>
65*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_header"> 39 </span>
66*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_header"> 61 </span>
67*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_screen"> 0A </span>
68*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_screen"> 00 </span>
69*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_screen"> 0A </span>
70*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_screen"> 00 </span>
71*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_screen"> 91 </span>
72*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_screen"> 00 </span>
73*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_screen"> 00 </span>
74*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_color"> FF </span>
75*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_color"> FF </span>
76*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_color"> FF </span>
77*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_color"> FF </span>
78*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_color"> 00 </span>
79*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_color"> 00 </span>
80*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_color"> 00 </span>
81*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_color"> 00 </span>
82*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_color"> FF </span>
83*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_color"> 00 </span>
84*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_color"> 00 </span>
85*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_color"> 00 </span>
86*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_graphic"> 21 </span>
87*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_graphic"> F9 </span>
88*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_graphic"> 04 </span>
89*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_graphic"> 00 </span>
90*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_graphic"> 00 </span>
91*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_graphic"> 00 </span>
92*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_graphic"> 00 </span>
93*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_graphic"> 00 </span>
94*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdesc"> 2C </span>
95*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdesc"> 00 </span>
96*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdesc"> 00 </span>
97*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdesc"> 00 </span>
98*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdesc"> 00 </span>
99*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdesc"> 0A </span>
100*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdesc"> 00 </span>
101*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdesc"> 0A </span>
102*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdesc"> 00 </span>
103*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdesc"> 00 </span>
104*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 02 </span>
105*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 16 </span>
106*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 8C </span>
107*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 2D </span>
108*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 99 </span>
109*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 87 </span>
110*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 2A </span>
111*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 1C </span>
112*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> DC </span>
113*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 33 </span>
114*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> A0 </span>
115*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 02 </span>
116*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 75 </span>
117*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> EC </span>
118*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 95 </span>
119*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> FA </span>
120*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> A8 </span>
121*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> DE </span>
122*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 60 </span>
123*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 8C </span>
124*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 04 </span>
125*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 91 </span>
126*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 4C </span>
127*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 01 </span>
128*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 00 </span>
129*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_trailer"> 3B </span>
130*324bb76bSAndroid Build Coastguard Worker</td>
131*324bb76bSAndroid Build Coastguard Worker</tr>
132*324bb76bSAndroid Build Coastguard Worker</table>
133*324bb76bSAndroid Build Coastguard Worker
134*324bb76bSAndroid Build Coastguard Worker<p>Note that not all possible block types are represented in this
135*324bb76bSAndroid Build Coastguard Workersample file. Later we'll provide samples of missing block types where
136*324bb76bSAndroid Build Coastguard Workerappropriate. The different types of blocks include: <a
137*324bb76bSAndroid Build Coastguard Workerhref="#header_block">header</a>, <a
138*324bb76bSAndroid Build Coastguard Workerhref="#logical_screen_descriptor_block">logical screen descriptor</a>,
139*324bb76bSAndroid Build Coastguard Worker<a href="#global_color_table_block">global color table</a>, <a
140*324bb76bSAndroid Build Coastguard Workerhref="#graphics_control_extension_block">graphics control
141*324bb76bSAndroid Build Coastguard Workerextension</a>, <a href="#image_descriptor_block">image descriptor</a>,
142*324bb76bSAndroid Build Coastguard Worker<a href="#local_color_table_block">local color table</a>, <a
143*324bb76bSAndroid Build Coastguard Workerhref="#image_data_block">image data</a>, <a
144*324bb76bSAndroid Build Coastguard Workerhref="#plain_text_extension_block">plain text extension</a>, <a
145*324bb76bSAndroid Build Coastguard Workerhref="#application_extension_block">application extension</a>, <a
146*324bb76bSAndroid Build Coastguard Workerhref="#comment_extension_block">comment extension</a>, and <a
147*324bb76bSAndroid Build Coastguard Workerhref="#trailer_block">trailer</a>.  Let's get started with the first
148*324bb76bSAndroid Build Coastguard Workerblock!</p>
149*324bb76bSAndroid Build Coastguard Worker
150*324bb76bSAndroid Build Coastguard Worker<h2><a name="header_block">Header Block</a></h2>
151*324bb76bSAndroid Build Coastguard Worker
152*324bb76bSAndroid Build Coastguard Worker<p>From the sample file:
153*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_header"> 47 </span>
154*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_header"> 49 </span>
155*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_header"> 46 </span>
156*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_header"> 38 </span>
157*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_header"> 39 </span>
158*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_header"> 61 </span>
159*324bb76bSAndroid Build Coastguard Worker</p>
160*324bb76bSAndroid Build Coastguard Worker
161*324bb76bSAndroid Build Coastguard Worker<p>All GIF files must start with a header block. The header takes up
162*324bb76bSAndroid Build Coastguard Workerthe first six bytes of the file. These bytes should all correspond to
163*324bb76bSAndroid Build Coastguard Worker<a href="http://www.ascii.cl/">ASCII character codes</a>. The first
164*324bb76bSAndroid Build Coastguard Workerthree bytes are called the <strong>signature</strong>.  These should
165*324bb76bSAndroid Build Coastguard Workeralways be &quot;GIF&quot; (ie 47=&quot;G&quot;, 49=&quot;I&quot;,
166*324bb76bSAndroid Build Coastguard Worker46=&quot;F&quot;). The next three specify the <strong>version</strong>
167*324bb76bSAndroid Build Coastguard Workerof the specification that was used to encode the image.
168*324bb76bSAndroid Build Coastguard Worker
169*324bb76bSAndroid Build Coastguard Worker<p>Normally the version string will be either &quot;89a&quot; (ie
170*324bb76bSAndroid Build Coastguard Worker38=&quot;8&quot;, 39=&quot;9&quot;,61=&quot;a&quot;) or &quot;87a&quot; (ie
171*324bb76bSAndroid Build Coastguard Worker38=&quot;8&quot;, 37=&quot;7&quot;,61=&quot;a&quot;).  All modern
172*324bb76bSAndroid Build Coastguard WorkerGIF-processing software recognizes both versions, For maximum
173*324bb76bSAndroid Build Coastguard Workercompatibility, GIFLIB will normally write an 87a signature unless the
174*324bb76bSAndroid Build Coastguard Workerfile contains GIF89 features.</p>
175*324bb76bSAndroid Build Coastguard Worker
176*324bb76bSAndroid Build Coastguard Worker<p style="text-align:center"><img src="header_block.gif" alt="GIF header block layout" style="border: 1px solid black" /></p>
177*324bb76bSAndroid Build Coastguard Worker
178*324bb76bSAndroid Build Coastguard Worker<h2><a name="logical_screen_descriptor_block">Logical Screen Descriptor</a></h2>
179*324bb76bSAndroid Build Coastguard Worker<p>From Sample File: <span class="byte gif_screen"> 0A </span>
180*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_screen"> 00 </span><span class="byte gif_screen"> 0A </span><span class="byte gif_screen"> 00 </span><span class="byte gif_screen"> 91 </span><span class="byte gif_screen"> 00 </span><span class="byte gif_screen"> 00 </span></p>
181*324bb76bSAndroid Build Coastguard Worker
182*324bb76bSAndroid Build Coastguard Worker<p>The logical screen descriptor always immediately follows the
183*324bb76bSAndroid Build Coastguard Workerheader. This block tells the decoder how much room this image will
184*324bb76bSAndroid Build Coastguard Workertake up. It is exactly seven bytes long. It starts with the
185*324bb76bSAndroid Build Coastguard Worker<strong>canvas width</strong> and <strong>canvas height</strong>.
186*324bb76bSAndroid Build Coastguard WorkerThese value can be found in the first two pairs of two bytes each.
187*324bb76bSAndroid Build Coastguard WorkerBoth are 16-bit, nonnegative integers (0-65,535).</p>
188*324bb76bSAndroid Build Coastguard Worker
189*324bb76bSAndroid Build Coastguard Worker<p>As with all the other multi-byte values in the GIF format, the
190*324bb76bSAndroid Build Coastguard Workerleast significant byte is stored first (little-endian format). This
191*324bb76bSAndroid Build Coastguard Workermeans where we would read <span class="byte"> 0A </span><span
192*324bb76bSAndroid Build Coastguard Workerclass="byte"> 00 </span> from the byte stream, we would normally write
193*324bb76bSAndroid Build Coastguard Workerit as <span class="byte">000A</span> which is the same as 10. Thus the
194*324bb76bSAndroid Build Coastguard Workerwidth of our sample image is 10 pixels. As a further example 255 would
195*324bb76bSAndroid Build Coastguard Workerbe stored as <span class="byte"> FF </span><span class="byte"> 00
196*324bb76bSAndroid Build Coastguard Worker</span> but 256 would be <span class="byte"> 00 </span><span
197*324bb76bSAndroid Build Coastguard Workerclass="byte"> 01 </span>.</p>
198*324bb76bSAndroid Build Coastguard Worker
199*324bb76bSAndroid Build Coastguard Worker<p>The canvas width and height are usually ignored by modern viewers.
200*324bb76bSAndroid Build Coastguard WorkerThe GIF format seems to have been designed with the idea that viewers
201*324bb76bSAndroid Build Coastguard Workerwould render multiple images in a GIF on a common canvas, giving an
202*324bb76bSAndroid Build Coastguard Workereffect like a picture wall. But nowadays multiple-image GIFs are
203*324bb76bSAndroid Build Coastguard Workergenerally used either as animations in which each sub-image is a frame
204*324bb76bSAndroid Build Coastguard Workeror as image libraries, with the GIF client handling compositing into
205*324bb76bSAndroid Build Coastguard Workersome canvas about which the GIF format holds no information.Thus, the
206*324bb76bSAndroid Build Coastguard Workercanvas width and height are mainly fossils. GIFLIB does extract them
207*324bb76bSAndroid Build Coastguard Workerand allow you to set them, however.</p>
208*324bb76bSAndroid Build Coastguard Worker
209*324bb76bSAndroid Build Coastguard Worker<p>The next byte contains four fields of packed data, the "logical
210*324bb76bSAndroid Build Coastguard Workerscreen descriptor". To understand these, we need to expand the byte
211*324bb76bSAndroid Build Coastguard Worker<span class="byte"> 91 </span> to binary as <span
212*324bb76bSAndroid Build Coastguard Workerclass="byte">10010001</span> and look at the fields inside it.</p>
213*324bb76bSAndroid Build Coastguard Worker
214*324bb76bSAndroid Build Coastguard Worker<p style="text-align:center"><img src="logical_screen_desc_block.gif" alt="GIF logical screen descriptor block layout" style="border: 1px solid black" /></p>
215*324bb76bSAndroid Build Coastguard Worker
216*324bb76bSAndroid Build Coastguard Worker<p>The first (most-significant) bit is the <strong>global color table
217*324bb76bSAndroid Build Coastguard Workerflag</strong>. If it's 0, then there is no global color table. If it's
218*324bb76bSAndroid Build Coastguard Worker1, then a global color table will follow. In our sample image, we can
219*324bb76bSAndroid Build Coastguard Workersee that we will have a global color table (as will usually be the
220*324bb76bSAndroid Build Coastguard Workercase).<p>
221*324bb76bSAndroid Build Coastguard Worker
222*324bb76bSAndroid Build Coastguard Worker<p>The next three bits are the <strong>color resolution</strong>. They
223*324bb76bSAndroid Build Coastguard Workerare only meaningful if there is a global color table, and allow you to
224*324bb76bSAndroid Build Coastguard Workercompute its size.  If the value of this field is N, the number of
225*324bb76bSAndroid Build Coastguard Workerentries in the global color table will be 2 ^ (N+1) - that is, two
226*324bb76bSAndroid Build Coastguard Workerraised to the power (N+1). Thus, the <span class="byte">001</span> in
227*324bb76bSAndroid Build Coastguard Workerthe sample image represents 2 bits/pixel; <span
228*324bb76bSAndroid Build Coastguard Workerclass="byte">111</span> would represent 8 bits/pixel.</p>
229*324bb76bSAndroid Build Coastguard Worker
230*324bb76bSAndroid Build Coastguard Worker<p>The GIF format shows its age here. A more modern design would
231*324bb76bSAndroid Build Coastguard Workersimply have allocated a byte or two for color table length. But GIF
232*324bb76bSAndroid Build Coastguard Workerwas designed when memory was much more expensive than it is today,
233*324bb76bSAndroid Build Coastguard Workerand the designers felt strong pressure to economize on every bit.
234*324bb76bSAndroid Build Coastguard WorkerThe consequence is that color table lengths have to be an exact power
235*324bb76bSAndroid Build Coastguard Workerof two. Perversely, this can force a waste of memory space in images
236*324bb76bSAndroid Build Coastguard Workerwith odd color counts.</p>
237*324bb76bSAndroid Build Coastguard Worker
238*324bb76bSAndroid Build Coastguard Worker<p>The next single bit is the <strong>sort flag</strong>. If the
239*324bb76bSAndroid Build Coastguard Workervalues is 1, then the colors in the global color table are sorted in
240*324bb76bSAndroid Build Coastguard Workerorder of &quot;decreasing importance,&quot; which typically means
241*324bb76bSAndroid Build Coastguard Worker&quot;decreasing frequency&quot; in the image. This can help the image
242*324bb76bSAndroid Build Coastguard Workerdecoder, but is not required. In the sample file this value has been
243*324bb76bSAndroid Build Coastguard Workerleft at 0.</p>
244*324bb76bSAndroid Build Coastguard Worker
245*324bb76bSAndroid Build Coastguard Worker<p>The sort flag reflected the high cost of dual-port memory at the
246*324bb76bSAndroid Build Coastguard Workertime the GIF specification was written in the late 1980s.  That kind
247*324bb76bSAndroid Build Coastguard Workerof limit disappeared in the mid-1990s, and modern GIF software ignores
248*324bb76bSAndroid Build Coastguard Workerthis flag.  Until version 5.0, GIFLIB ignored it on input and zeroed
249*324bb76bSAndroid Build Coastguard Workerit on output; 5.0 and later versions read and preserve it.</p>
250*324bb76bSAndroid Build Coastguard Worker
251*324bb76bSAndroid Build Coastguard Worker<p>The next byte gives us the <strong>background color
252*324bb76bSAndroid Build Coastguard Workerindex</strong>. This byte is only meaningful if the global color table
253*324bb76bSAndroid Build Coastguard Workerflag is 1, and if there is no global color table, this byte should be
254*324bb76bSAndroid Build Coastguard Worker0.. To understand it you have to remember the original "picture wall"
255*324bb76bSAndroid Build Coastguard Workerrendering model for GIFs in which sub-images are composited onto a
256*324bb76bSAndroid Build Coastguard Workerlarger canvas.  It represents which index in the global color table
257*324bb76bSAndroid Build Coastguard Workershould be used for pixels on the virtual canvas that aren't overlayed
258*324bb76bSAndroid Build Coastguard Workerby an image. GIFLIB supports reading and setting this byte, but modern
259*324bb76bSAndroid Build Coastguard Workerviewers and browsers generally have no use for it.</p>
260*324bb76bSAndroid Build Coastguard Worker
261*324bb76bSAndroid Build Coastguard Worker<p>The last byte of the logical screen descriptor is the <strong>pixel
262*324bb76bSAndroid Build Coastguard Workeraspect ratio</strong>. Modern viewers don't use this.  Until 5.0,
263*324bb76bSAndroid Build Coastguard WorkerGIFLIB ignored this flag on input and zeroed it on output; now it is
264*324bb76bSAndroid Build Coastguard Workerread and preserved if present. The GIF standard doesn't give a
265*324bb76bSAndroid Build Coastguard Workerrationale for it, but it seems likely that the designers intended it
266*324bb76bSAndroid Build Coastguard Workerfor representing image captures from the analog television of the day,
267*324bb76bSAndroid Build Coastguard Workerwhich had rectangular pixel-equivalents. The GIF specification says
268*324bb76bSAndroid Build Coastguard Workerthat if there was a value specified in this byte, N, the actual ratio
269*324bb76bSAndroid Build Coastguard Workerused would be (N + 15) / 64 for all N&lt;&gt;0.</p>
270*324bb76bSAndroid Build Coastguard Worker
271*324bb76bSAndroid Build Coastguard Worker<h2><a name="global_color_table_block">Global Color Table</a></h2>
272*324bb76bSAndroid Build Coastguard Worker
273*324bb76bSAndroid Build Coastguard Worker<p>From the sample file:
274*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_color"> FF </span>
275*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_color"> FF </span>
276*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_color"> FF </span>
277*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_color"> FF </span>
278*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_color"> 00 </span>
279*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_color"> 00 </span>
280*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_color"> 00 </span>
281*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_color"> 00 </span>
282*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_color"> FF </span>
283*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_color"> 00 </span>
284*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_color"> 00 </span>
285*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_color"> 00 </span>
286*324bb76bSAndroid Build Coastguard Worker</p>
287*324bb76bSAndroid Build Coastguard Worker
288*324bb76bSAndroid Build Coastguard Worker<p>GIFs can have either a <strong>global color table</strong> or local
289*324bb76bSAndroid Build Coastguard Workercolor tables for each sub-image.  Each color table consists of a list
290*324bb76bSAndroid Build Coastguard Workerof RGB (Red-Green-Blue) color component intensities, three bytes for
291*324bb76bSAndroid Build Coastguard Workereach color, with intensities ranging from 0 (least) to 255 (most). The
292*324bb76bSAndroid Build Coastguard Workercolor (0,0,0) is deepest black, the color (255,255,255) brightest
293*324bb76bSAndroid Build Coastguard Workerwhite. The other extreme colors are red at (255,0,0), green at
294*324bb76bSAndroid Build Coastguard Worker(0,255,0) and blue at (0,0,255).</p>
295*324bb76bSAndroid Build Coastguard Worker
296*324bb76bSAndroid Build Coastguard Worker<p>As previously noted, the length of the global color table is
297*324bb76bSAndroid Build Coastguard Worker2^(N+1) entries where N is the value of the color depth field in the
298*324bb76bSAndroid Build Coastguard Workerlogical screen descriptor. The table will take up 3*2^(N+1) bytes in
299*324bb76bSAndroid Build Coastguard Workerthe stream.</p>
300*324bb76bSAndroid Build Coastguard Worker
301*324bb76bSAndroid Build Coastguard Worker<div style="text-align:center">
302*324bb76bSAndroid Build Coastguard Worker<table id="global_color_size">
303*324bb76bSAndroid Build Coastguard Worker<tr><th>Size In Logical<br/>Screen Desc</th><th>Number Of<br/>Colors</th><th>Byte<br/>Length</th></tr>
304*324bb76bSAndroid Build Coastguard Worker<tr><td>0</td><td>2</td><td>6</td></tr>
305*324bb76bSAndroid Build Coastguard Worker<tr><td>1</td><td>4</td><td>12</td></tr>
306*324bb76bSAndroid Build Coastguard Worker<tr><td>2</td><td>8</td><td>24</td></tr>
307*324bb76bSAndroid Build Coastguard Worker<tr><td>3</td><td>16</td><td>48</td></tr>
308*324bb76bSAndroid Build Coastguard Worker<tr><td>4</td><td>32</td><td>96</td></tr>
309*324bb76bSAndroid Build Coastguard Worker<tr><td>5</td><td>64</td><td>192</td></tr>
310*324bb76bSAndroid Build Coastguard Worker<tr><td>6</td><td>128</td><td>384</td></tr>
311*324bb76bSAndroid Build Coastguard Worker<tr><td>7</td><td>256</td><td>768</td></tr>
312*324bb76bSAndroid Build Coastguard Worker</table>
313*324bb76bSAndroid Build Coastguard Worker</div>
314*324bb76bSAndroid Build Coastguard Worker
315*324bb76bSAndroid Build Coastguard Worker<p>Our sample file has a global color table size of 1. This means it
316*324bb76bSAndroid Build Coastguard Workerholds 2^(1+1)=2^2=4 colors.  We can see that it takes up 12, (3*4),
317*324bb76bSAndroid Build Coastguard Workerbytes as expected. We read the bytes three at a time to get each of
318*324bb76bSAndroid Build Coastguard Workerthe colors. The first color is #FFFFFF (white). This value is given an
319*324bb76bSAndroid Build Coastguard Workerindex of 0.  The second color is #FF0000 (red). The color with an
320*324bb76bSAndroid Build Coastguard Workerindex value of 2 is #0000FF (blue).  The last color is #000000
321*324bb76bSAndroid Build Coastguard Worker(black). The index numbers will be important when we decode the actual
322*324bb76bSAndroid Build Coastguard Workerimage data.</p>
323*324bb76bSAndroid Build Coastguard Worker
324*324bb76bSAndroid Build Coastguard Worker<p>Note that this block is labeled as &quot;optional.&quot; Not every
325*324bb76bSAndroid Build Coastguard WorkerGIF has to specify a global color table. However, if the global color
326*324bb76bSAndroid Build Coastguard Workertable flag is set to 1 in the logical screen descriptor block, the
327*324bb76bSAndroid Build Coastguard Workercolor table is then required to immediately follow that block.
328*324bb76bSAndroid Build Coastguard Worker</p>
329*324bb76bSAndroid Build Coastguard Worker
330*324bb76bSAndroid Build Coastguard Worker<p style="text-align:center"><img src="global_color_table.gif" alt="GIF global color table block layout" style="border: 1px solid black" /></p>
331*324bb76bSAndroid Build Coastguard Worker
332*324bb76bSAndroid Build Coastguard Worker<h2><a name="graphics_control_extension_block">Graphics Control Extension</a></h2>
333*324bb76bSAndroid Build Coastguard Worker
334*324bb76bSAndroid Build Coastguard Worker<p>From the sample file:
335*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_graphic"> 21</span>
336*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_graphic"> F9 </span>
337*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_graphic"> 04 </span>
338*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_graphic"> 00</span>
339*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_graphic"> 00 </span>
340*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_graphic"> 00 </span>
341*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_graphic"> 00</span>
342*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_graphic"> 00 </span>
343*324bb76bSAndroid Build Coastguard Worker</p>
344*324bb76bSAndroid Build Coastguard Worker
345*324bb76bSAndroid Build Coastguard Worker<p>Graphic control extension blocks are used to specify transparency
346*324bb76bSAndroid Build Coastguard Workersettings and control animations. They are an optional GIF89 extension.
347*324bb76bSAndroid Build Coastguard WorkerThe semantics of this extension will be described in detail in a later section
348*324bb76bSAndroid Build Coastguard Worker(see <a href="animation_and_transparency.html">Transparency and Animation</a>);
349*324bb76bSAndroid Build Coastguard Workerfor completeness we'll describe the data fields here.</p>
350*324bb76bSAndroid Build Coastguard Worker
351*324bb76bSAndroid Build Coastguard Worker<p>The first byte is the <strong>extension introducer</strong>. All
352*324bb76bSAndroid Build Coastguard Worker<em>extension</em> blocks begin with <span
353*324bb76bSAndroid Build Coastguard Workerclass="byte">21</span>. Next is the <strong>graphic control
354*324bb76bSAndroid Build Coastguard Workerlabel</strong>, <span class="byte">F9</span>, which is the value that
355*324bb76bSAndroid Build Coastguard Workerflags this as a graphic control extension. Third up is the total
356*324bb76bSAndroid Build Coastguard Worker<strong>block size</strong> in bytes. Next is a packed field. Bits 1-3
357*324bb76bSAndroid Build Coastguard Workerare reserved for future use. Bits 4-6 indicate <strong>disposal
358*324bb76bSAndroid Build Coastguard Workermethod</strong>. The penultimate bit is the <strong>user input
359*324bb76bSAndroid Build Coastguard Workerflag</strong> and the last is the <strong>transparent color
360*324bb76bSAndroid Build Coastguard Workerflag</strong>. The <strong>delay time</strong> value follows in the
361*324bb76bSAndroid Build Coastguard Workernext two bytes stored in unsigned format. After that we have the
362*324bb76bSAndroid Build Coastguard Worker<strong>transparent color index</strong> byte. Finally we have the
363*324bb76bSAndroid Build Coastguard Worker<strong>block terminator</strong> which is always <span
364*324bb76bSAndroid Build Coastguard Workerclass="byte">00</span>.</p>
365*324bb76bSAndroid Build Coastguard Worker
366*324bb76bSAndroid Build Coastguard Worker<p style="text-align:center"><img src="graphic_control_ext.gif"
367*324bb76bSAndroid Build Coastguard Workeralt="GIF graphic control extension block layout" style="border: 1px
368*324bb76bSAndroid Build Coastguard Workersolid black" /></p>
369*324bb76bSAndroid Build Coastguard Worker
370*324bb76bSAndroid Build Coastguard Worker<h2><a name="image_descriptor_block">Image Descriptor</a></h2>
371*324bb76bSAndroid Build Coastguard Worker
372*324bb76bSAndroid Build Coastguard Worker<p>From the sample file:
373*324bb76bSAndroid Build Coastguard Worker
374*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdesc"> 2C </span>
375*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdesc"> 00 </span>
376*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdesc"> 00 </span>
377*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdesc"> 00 </span>
378*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdesc"> 00 </span>
379*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdesc"> 0A </span>
380*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdesc"> 00 </span>
381*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdesc"> 0A </span>
382*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdesc"> 00 </span>
383*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdesc"> 00 </span>
384*324bb76bSAndroid Build Coastguard Worker</p>
385*324bb76bSAndroid Build Coastguard Worker
386*324bb76bSAndroid Build Coastguard Worker<p>A single GIF file may contain multiple images.  In the original GIF
387*324bb76bSAndroid Build Coastguard Workerrendering model these wwere meant to be composited onto a larger
388*324bb76bSAndroid Build Coastguard Workervirtual canvas. Nowadays nultiple images are normally used for animations.</p>
389*324bb76bSAndroid Build Coastguard Worker
390*324bb76bSAndroid Build Coastguard Worker<p>Each image begins with an image descriptor block. This block is
391*324bb76bSAndroid Build Coastguard Workerexactly 10 bytes long.</p>
392*324bb76bSAndroid Build Coastguard Worker
393*324bb76bSAndroid Build Coastguard Worker<p>The first byte is the <strong>image separator</strong>. Every image
394*324bb76bSAndroid Build Coastguard Workerdescriptor begins with the value <span class="byte">2C</span>. The
395*324bb76bSAndroid Build Coastguard Workernext 8 bytes represent the location and size of the following
396*324bb76bSAndroid Build Coastguard Workerimage.</p>
397*324bb76bSAndroid Build Coastguard Worker
398*324bb76bSAndroid Build Coastguard Worker<p>An image in the stream may not necessarily take up the entire
399*324bb76bSAndroid Build Coastguard Workercanvas size defined by the logical screen descriptor. Therefore, the
400*324bb76bSAndroid Build Coastguard Workerimage descriptor specifies the <strong>image left position</strong>
401*324bb76bSAndroid Build Coastguard Workerand <strong>image top position</strong> of where the image should
402*324bb76bSAndroid Build Coastguard Workerbegin on the canvas. Both these fields are usually ignored by modern
403*324bb76bSAndroid Build Coastguard Workerviewers and browsers.</p>
404*324bb76bSAndroid Build Coastguard Worker
405*324bb76bSAndroid Build Coastguard Worker<p>Next, this block specifies the <strong>image width</strong> and
406*324bb76bSAndroid Build Coastguard Worker<strong>image height</strong>. Each of these values is in the
407*324bb76bSAndroid Build Coastguard Workertwo-byte, unsigned little-endian format. Our sample image indicates
408*324bb76bSAndroid Build Coastguard Workerthat the image starts at (0,0) and is 10 pixels wide by 10 pixels
409*324bb76bSAndroid Build Coastguard Workertall. (This image does take up the whole canvas size.)</p>
410*324bb76bSAndroid Build Coastguard Worker
411*324bb76bSAndroid Build Coastguard Worker<p>The last byte is another packed field. In our sample file this byte is 0 so
412*324bb76bSAndroid Build Coastguard Workerall of the sub-values will be zero. The first (most significant) bit in
413*324bb76bSAndroid Build Coastguard Workerthe byte is the <strong>local color table flag</strong>. Setting this flag
414*324bb76bSAndroid Build Coastguard Workerto 1 allows you to specify that the image data that follows uses a different
415*324bb76bSAndroid Build Coastguard Workercolor table than the global color table. (More information on the local
416*324bb76bSAndroid Build Coastguard Workercolor table follows.)</p>
417*324bb76bSAndroid Build Coastguard Worker
418*324bb76bSAndroid Build Coastguard Worker<p>The second bit is the <strong>interlace flag</strong>. Interlacing
419*324bb76bSAndroid Build Coastguard Workerchanges the way images are rendered onto the screen in a way that may
420*324bb76bSAndroid Build Coastguard Workerreduce annoying visual flicker. The effect of interlacing on a display
421*324bb76bSAndroid Build Coastguard Workeris that the first pass of appears immediately, displaying the graphic
422*324bb76bSAndroid Build Coastguard Workeras a first as a blur and then sharpenining it up as later passes fill
423*324bb76bSAndroid Build Coastguard Workerin lines. That allows the human viewer to at least get an idea of
424*324bb76bSAndroid Build Coastguard Workerwhat's coming up rather than waiting for the entire image to be
425*324bb76bSAndroid Build Coastguard Workerpainted, line by line. <a
426*324bb76bSAndroid Build Coastguard Workerhref="http://webtutor.tamu.edu/lesson6/interlace.html">See an
427*324bb76bSAndroid Build Coastguard Workerexample</a>.  To support this, the scan lines of the image need to be
428*324bb76bSAndroid Build Coastguard Workerstored in a different order than the normal top-down, separated into
429*324bb76bSAndroid Build Coastguard Workersections that will be rendered in four separate passes.</p>
430*324bb76bSAndroid Build Coastguard Worker
431*324bb76bSAndroid Build Coastguard Worker<p style="text-align:center"><img src="image_descriptor_block.gif"
432*324bb76bSAndroid Build Coastguard Workeralt="GIF image descriptor block layout" style="border: 1px solid
433*324bb76bSAndroid Build Coastguard Workerblack" /></p>
434*324bb76bSAndroid Build Coastguard Worker
435*324bb76bSAndroid Build Coastguard Worker<h2><a name="local_color_table_block">Local Color Table</a></h2>
436*324bb76bSAndroid Build Coastguard Worker<p>A local color table is organized the same as a global color table. The local
437*324bb76bSAndroid Build Coastguard Workercolor table would always immediately follow an image descriptor but will only
438*324bb76bSAndroid Build Coastguard Workerbe there if the local color table flag is set to 1. It is effective only for the
439*324bb76bSAndroid Build Coastguard Workerblock of image data that immediately follows it. If no local color table
440*324bb76bSAndroid Build Coastguard Workeris specified, the global color table is used for the following image data.</p>
441*324bb76bSAndroid Build Coastguard Worker
442*324bb76bSAndroid Build Coastguard Worker<p>The size of the local color table can be calculated by the value
443*324bb76bSAndroid Build Coastguard Workergiven in the image descriptor. Just like with the global color table,
444*324bb76bSAndroid Build Coastguard Workerif the image descriptor specifies a size of N, the color table will
445*324bb76bSAndroid Build Coastguard Workercontain 2^(N+1) colors and will take up 3*2^(N+1) bytes.</p>
446*324bb76bSAndroid Build Coastguard Worker
447*324bb76bSAndroid Build Coastguard Worker<h2><a name="image_data_block">Image Data</a></h2>
448*324bb76bSAndroid Build Coastguard Worker
449*324bb76bSAndroid Build Coastguard Worker<p>From the sample file:
450*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 02 </span>
451*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 16 </span>
452*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 8C </span>
453*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 2D </span>
454*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 99 </span>
455*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 87 </span>
456*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 2A </span>
457*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 1C </span>
458*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> DC </span>
459*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 33 </span>
460*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> A0 </span>
461*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 02 </span>
462*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 75 </span>
463*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> EC </span>
464*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 95 </span>
465*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> FA </span>
466*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> A8 </span>
467*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> DE </span>
468*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 60 </span>
469*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 8C </span>
470*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 04 </span>
471*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 91 </span>
472*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 4C </span>
473*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 01 </span>
474*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_imgdata"> 00 </span></p>
475*324bb76bSAndroid Build Coastguard Worker
476*324bb76bSAndroid Build Coastguard Worker<p>Finally we get to the actual image data. The image data is composed of
477*324bb76bSAndroid Build Coastguard Workera series of output codes which tell the decoder which colors to emit
478*324bb76bSAndroid Build Coastguard Workerto the canvas. These codes are combined into the bytes that make up
479*324bb76bSAndroid Build Coastguard Workerthe block.</p>
480*324bb76bSAndroid Build Coastguard Worker
481*324bb76bSAndroid Build Coastguard Worker<p>There's another section on decoding these output code into an image
482*324bb76bSAndroid Build Coastguard Worker(see <a href="lzw_image_data.html">LZW Image Data</a>).  Here we'll
483*324bb76bSAndroid Build Coastguard Workerjust see how to determine how long the block will be. </p>
484*324bb76bSAndroid Build Coastguard Worker
485*324bb76bSAndroid Build Coastguard Worker<p>The first byte of this block is the <strong>LZW minimum code
486*324bb76bSAndroid Build Coastguard Workersize</strong>.  This value is used to decode the compressed output
487*324bb76bSAndroid Build Coastguard Workercodes. (Again, see the section on <a href="lzw_image_data.html">LZW
488*324bb76bSAndroid Build Coastguard Workercompression</a> to see how this works.)  The rest of the bytes
489*324bb76bSAndroid Build Coastguard Workerrepresent <em>data sub-blocks</em>. Data sub-blocks are are groups of
490*324bb76bSAndroid Build Coastguard Worker1 - 256 bytes. The first byte in the sub-block tells you how many
491*324bb76bSAndroid Build Coastguard Workerbytes of actual data follow. This can be a value from 0 (<span
492*324bb76bSAndroid Build Coastguard Workerclass="byte">00</span>) it 255 (<span class="byte">FF</span>). After
493*324bb76bSAndroid Build Coastguard Workeryou've read those bytes, the next byte you read will tell you now many
494*324bb76bSAndroid Build Coastguard Workermore bytes of data follow that one. You continue to read until you
495*324bb76bSAndroid Build Coastguard Workerreach a sub-block that says that zero bytes follow.
496*324bb76bSAndroid Build Coastguard Worker</p>
497*324bb76bSAndroid Build Coastguard Worker
498*324bb76bSAndroid Build Coastguard Worker<p>You can see our sample file has a LZW minimum code size of 2. The
499*324bb76bSAndroid Build Coastguard Workernext byte tells us that 22 bytes of data follow it (<span
500*324bb76bSAndroid Build Coastguard Workerclass="byte">16</span> hex = 22).  After we've read those 22 bytes, we
501*324bb76bSAndroid Build Coastguard Workersee the next value is 0. This means that no bytes follow and we have
502*324bb76bSAndroid Build Coastguard Workerread all the data in this block.</p>
503*324bb76bSAndroid Build Coastguard Worker
504*324bb76bSAndroid Build Coastguard Worker<p style="text-align:center"><img src="image_data_block.gif" alt="GIF image data block layout" style="border: 1px solid black" /></p>
505*324bb76bSAndroid Build Coastguard Worker
506*324bb76bSAndroid Build Coastguard Worker<h2><a name="plain_text_extension_block">Plain Text Extension</a></h2>
507*324bb76bSAndroid Build Coastguard Worker<p>Example (not in the sample file):
508*324bb76bSAndroid Build Coastguard Worker
509*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 21 </span>
510*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 01 </span>
511*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 0C </span>
512*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 00 </span>
513*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 00 </span>
514*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 00 </span>
515*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 00 </span>
516*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 64 </span>
517*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 00 </span>
518*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 64 </span>
519*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 00 </span>
520*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 14 </span>
521*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 14 </span>
522*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 01 </span>
523*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 00 </span>
524*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 0B </span>
525*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 68 </span>
526*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 65 </span>
527*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 6C </span>
528*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 6C </span>
529*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 6F </span>
530*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 20 </span>
531*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 77 </span>
532*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 6F </span>
533*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 72 </span>
534*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 6C </span>
535*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 64 </span>
536*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 00 </span></p>
537*324bb76bSAndroid Build Coastguard Worker
538*324bb76bSAndroid Build Coastguard Worker<p>The GIF89 specification allows you to specify text captions to be
539*324bb76bSAndroid Build Coastguard Workeroverlayed on the following image.  This feature never took off;
540*324bb76bSAndroid Build Coastguard Workerbrowsers and image-processing applications such as Photoshop ignore
541*324bb76bSAndroid Build Coastguard Workerit, and GIFLIB doesn't try to interpret it.</p>
542*324bb76bSAndroid Build Coastguard Worker
543*324bb76bSAndroid Build Coastguard Worker<p>The block begins with an <strong>extension introducer</strong> as all
544*324bb76bSAndroid Build Coastguard Workerextension block types do. This value is always <span class="byte">21</span>.
545*324bb76bSAndroid Build Coastguard WorkerThe next byte is the <strong>plain text label</strong>. This value of
546*324bb76bSAndroid Build Coastguard Worker<span class="byte">01</span> is used to distinguish plain text extensions
547*324bb76bSAndroid Build Coastguard Workerfrom all other extensions. The next byte is the <strong>block size</strong>.
548*324bb76bSAndroid Build Coastguard WorkerThis tells you how many bytes there are until the actual text data begins, or
549*324bb76bSAndroid Build Coastguard Workerin other words, how many bytes you can now skip. The byte value will probably be
550*324bb76bSAndroid Build Coastguard Worker<span class="byte">0C</span> which means you should jump forward 12 bytes. The
551*324bb76bSAndroid Build Coastguard Workertext that follows is encoded in data sub-blocks
552*324bb76bSAndroid Build Coastguard Worker(see <a href="#image_data_block">Image Data</a> to see how
553*324bb76bSAndroid Build Coastguard Workerthese sub-blocks are formed). The block ends when you reach a sub-block of
554*324bb76bSAndroid Build Coastguard Workerlength 0.</p>
555*324bb76bSAndroid Build Coastguard Worker
556*324bb76bSAndroid Build Coastguard Worker<h2><a name="application_extension_block">Application Extension</a></h2>
557*324bb76bSAndroid Build Coastguard Worker<p>Example (not in sample file):
558*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 21 </span>
559*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> FF </span>
560*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 0B </span>
561*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 4E </span>
562*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 45 </span>
563*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 54 </span>
564*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 53 </span>
565*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 43 </span>
566*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 41 </span>
567*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 50 </span>
568*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 45 </span>
569*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 32 </span>
570*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 2E </span>
571*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 30 </span>
572*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 03 </span>
573*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 01 </span>
574*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 05 </span>
575*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 00 </span>
576*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 00 </span>
577*324bb76bSAndroid Build Coastguard Worker</p>
578*324bb76bSAndroid Build Coastguard Worker
579*324bb76bSAndroid Build Coastguard Worker<p>The GIF89 specification allows for application-specific information
580*324bb76bSAndroid Build Coastguard Workerto be embedded in the GIF file itself. This capability is not much
581*324bb76bSAndroid Build Coastguard Workerused.  About the only known public one is the Netscape 2.0</a>
582*324bb76bSAndroid Build Coastguard Workerextension (described below) which is used to loop an animated GIF
583*324bb76bSAndroid Build Coastguard Workerfile. We'll go into more detail on looping in when we talk about <a
584*324bb76bSAndroid Build Coastguard Workerhref="animation_and_transparency.html">animation</a>.</p>
585*324bb76bSAndroid Build Coastguard Worker
586*324bb76bSAndroid Build Coastguard Worker<p>The Netscape 2.0 looping block must appear immediately after the
587*324bb76bSAndroid Build Coastguard Workerglobal color table of the logical screen descriptor.  It is
588*324bb76bSAndroid Build Coastguard Worker19 bytes long.
589*324bb76bSAndroid Build Coastguard Worker
590*324bb76bSAndroid Build Coastguard Worker<pre>
591*324bb76bSAndroid Build Coastguard Workerbyte  1        : 33 (hex 0x21) GIF Extension code
592*324bb76bSAndroid Build Coastguard Workerbyte  2        : 255 (hex 0xFF) Application Extension Label
593*324bb76bSAndroid Build Coastguard Workerbyte  3        : 11 (hex 0x0B) Length of Application Block
594*324bb76bSAndroid Build Coastguard Worker                 (eleven bytes of data to follow)
595*324bb76bSAndroid Build Coastguard Workerbytes 4 to 11  : "NETSCAPE"
596*324bb76bSAndroid Build Coastguard Workerbytes 12 to 14 : "2.0"
597*324bb76bSAndroid Build Coastguard Workerbyte  15       : 3 (hex 0x03) Length of Data Sub-Block
598*324bb76bSAndroid Build Coastguard Worker                 (three bytes of data to follow)
599*324bb76bSAndroid Build Coastguard Workerbyte  16       : 1 (hex 0x01)
600*324bb76bSAndroid Build Coastguard Workerbytes 17 to 18 : 0 to 65535, an unsigned integer in
601*324bb76bSAndroid Build Coastguard Worker                 little-endian byte format. This specifies the
602*324bb76bSAndroid Build Coastguard Worker                 number of times the loop should
603*324bb76bSAndroid Build Coastguard Worker                 be executed.
604*324bb76bSAndroid Build Coastguard Workerbyte  19       : 0 (hex 0x00) a Data Sub-Block Terminator.
605*324bb76bSAndroid Build Coastguard Worker</pre>
606*324bb76bSAndroid Build Coastguard Worker</p>
607*324bb76bSAndroid Build Coastguard Worker
608*324bb76bSAndroid Build Coastguard Worker<p>As with all extensions, we start with <span class="byte">21</span>
609*324bb76bSAndroid Build Coastguard Workerwhich is the <strong>extension introducer</strong>. Next is the
610*324bb76bSAndroid Build Coastguard Worker<strong>extension label</strong> which for application extensions is
611*324bb76bSAndroid Build Coastguard Worker<span class="byte">FF</span>. The next value is the <strong>block
612*324bb76bSAndroid Build Coastguard Workersize</strong> which tells you how many bytes there are before the
613*324bb76bSAndroid Build Coastguard Workeractual application data begins. This byte value should be <span
614*324bb76bSAndroid Build Coastguard Workerclass="byte">0B</span> which indicates 11 bytes. These 11 bytes hold
615*324bb76bSAndroid Build Coastguard Workertwo pieces of information. First is the <strong>application
616*324bb76bSAndroid Build Coastguard Workeridentifier</strong> which takes up the first 8 bytes. These bytes
617*324bb76bSAndroid Build Coastguard Workershould contain ASCII character codes that identify to which
618*324bb76bSAndroid Build Coastguard Workerapplication the extension belongs. In the case of the example above,
619*324bb76bSAndroid Build Coastguard Workerthe application identifier is &quot;NETSCAPE&quot; which is
620*324bb76bSAndroid Build Coastguard Workerconveniently 8 characters long. The next three bytes are the
621*324bb76bSAndroid Build Coastguard Worker<strong>application authentication code</strong>. The spec says these
622*324bb76bSAndroid Build Coastguard Workerbytes can be used to &quot;authenticate the application
623*324bb76bSAndroid Build Coastguard Workeridentifier.&quot; With the Netscape 2.0 extension, this value is simply
624*324bb76bSAndroid Build Coastguard Workera version number, &quot;2.0&quot;, hence the extensions name. What
625*324bb76bSAndroid Build Coastguard Workerfollows is the application data broken into data sub-blocks. As with
626*324bb76bSAndroid Build Coastguard Workerthe other extensions, the block terminates when you read a sub-block
627*324bb76bSAndroid Build Coastguard Workerthat has zero bytes of data.</p>
628*324bb76bSAndroid Build Coastguard Worker
629*324bb76bSAndroid Build Coastguard Worker<h2><a name="comment_extension_block">Comment Extension</a></h2>
630*324bb76bSAndroid Build Coastguard Worker
631*324bb76bSAndroid Build Coastguard Worker<p>Example (not in sample file):
632*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 21 </span>
633*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> FE </span>
634*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 09 </span>
635*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 62 </span>
636*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 6C </span>
637*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 75 </span>
638*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 65 </span>
639*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 62 </span>
640*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 65 </span>
641*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 72 </span>
642*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 72 </span>
643*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 79 </span>
644*324bb76bSAndroid Build Coastguard Worker<span class="byte gif_ext"> 00 </span></p>
645*324bb76bSAndroid Build Coastguard Worker
646*324bb76bSAndroid Build Coastguard Worker<p>One last GIF89 extension type is the comment extension. This allows you
647*324bb76bSAndroid Build Coastguard Workerto embed ASCII text in a GIF file, and is sometimes used to include an
648*324bb76bSAndroid Build Coastguard Workerimage description, image credit, or other human-readable metadata such as
649*324bb76bSAndroid Build Coastguard Workerthe GPS location of the image capture.</p>
650*324bb76bSAndroid Build Coastguard Worker
651*324bb76bSAndroid Build Coastguard Worker<p>It's probably no surprise by now that the first byte is the
652*324bb76bSAndroid Build Coastguard Worker<strong>extension introducer</strong> which is <span
653*324bb76bSAndroid Build Coastguard Workerclass="byte">21</span>. The next byte is always <span
654*324bb76bSAndroid Build Coastguard Workerclass="byte">FE</span> which is the <strong>comment label</strong>.
655*324bb76bSAndroid Build Coastguard WorkerThen we jump right to data sub-blocks containing ASCII character codes
656*324bb76bSAndroid Build Coastguard Workerfor your comment. As you can see from the example we have one data
657*324bb76bSAndroid Build Coastguard Workersub-block that is 9 bytes long. If you translate the character codes
658*324bb76bSAndroid Build Coastguard Workeryou see that the comment is &quot;blueberry.&quot; The final byte,
659*324bb76bSAndroid Build Coastguard Worker<span class="byte">00</span>, indicates a sub-block with zero bytes
660*324bb76bSAndroid Build Coastguard Workerthat follow which let's us know we have reached the end of the block.</p>
661*324bb76bSAndroid Build Coastguard Worker
662*324bb76bSAndroid Build Coastguard Worker<p style="text-align:center"><img src="comment_ext.gif" alt="GIF comment extension block layout" style="border: 1px solid black" /></p>
663*324bb76bSAndroid Build Coastguard Worker
664*324bb76bSAndroid Build Coastguard Worker<h2><a name="trailer_block">Trailer</a></h2>
665*324bb76bSAndroid Build Coastguard Worker
666*324bb76bSAndroid Build Coastguard Worker<p>From sample file: <span class="byte gif_trailer"> 3B </span></p>
667*324bb76bSAndroid Build Coastguard Worker
668*324bb76bSAndroid Build Coastguard Worker<p>The trailer block indicates when you've reached the end of the file.
669*324bb76bSAndroid Build Coastguard WorkerIt is always a byte with a value of <span class="byte">3B</span>.</p>
670*324bb76bSAndroid Build Coastguard Worker
671*324bb76bSAndroid Build Coastguard Worker<p style="text-align:center"><img src="trailer_block.gif" alt="GIF
672*324bb76bSAndroid Build Coastguard Workertrailer block layout" style="border: 1px solid black" /></p>
673*324bb76bSAndroid Build Coastguard Worker
674*324bb76bSAndroid Build Coastguard Worker<h2>Next: LZW Image Data</h2>
675*324bb76bSAndroid Build Coastguard Worker
676*324bb76bSAndroid Build Coastguard Worker<p>Now that you know what the basic parts of a GIF file are, let's next
677*324bb76bSAndroid Build Coastguard Workerfocus our attention on how the actual image data is stored and compressed.<p>
678*324bb76bSAndroid Build Coastguard Worker
679*324bb76bSAndroid Build Coastguard Worker<p><a href="lzw_image_data.html">Continue...</a></p>
680*324bb76bSAndroid Build Coastguard Worker</div>
681*324bb76bSAndroid Build Coastguard Worker
682*324bb76bSAndroid Build Coastguard Worker<div style="text-align:center; margin-top: 10px; padding-top: 10px; border-top: #cecece 1px solid">
683*324bb76bSAndroid Build Coastguard Worker<a href="../index.html">Back to GIFLIB documentation</a>
684*324bb76bSAndroid Build Coastguard Worker</div>
685*324bb76bSAndroid Build Coastguard Worker
686*324bb76bSAndroid Build Coastguard Worker</body>
687*324bb76bSAndroid Build Coastguard Worker</html>
688