GIFs

Think about how telegraphs worked in the old days: the sender had to pay for each and every letter, so brevity was important, and long messages prohibitavely expensive. In some ways, this is not unlike the web, where the larger something is, the longer it takes to download, so brevity helps. GIFs, like JPGs, are one way of making your images a little briefer.

Now, consider Dr. Seuss. The Cat in the Hat uses only 220 individual words to make up its complete text; Green Eggs and Ham uses only 50. Repetition of words and phrases is what makes each of these books possible. So let's say we wanted to send the complete text of The Cat in the Hat via telegraph, and each letter (including spaces) was going to cost a dollar. Just to send the title, The Cat in the Hat, is going to cost $18.00. Moreover, the same phrase, "the cat in the hat," appears more than once in the story, as do the individual words "the" "cat" "in" and "hat". Because of the repetition, we'd be paying a lot to send the same information over and over again.

But we could compress the text without necessarily losing anything by inventing a simple code: if we could agree that the number "1" stood for "the " (with the space), we could send "1cat in 1hat", at a total cost of $12, saving $6, with no loss of quality: the receiver needs to do a bit of work, sure, but they still get the full text of the book.

If we expanded our code, replacing "cat " with "2", "in " with "3", and "hat " with "4", we'd have "12314", total cost $5, which the receiver could decode one number at a time and get "1='the ", 2='cat ', 3='in ', 1='the ', 4='hat '". By encoding all 220 individual words in the book, we'd save a lot of money in sending the book via telegraph.

We could also notice that phrases are just as repetitive as words: "the cat " and "the hat " show up quite a few times, as does the whole title itself, "the cat in the hat ". We could encode those as 5, 6 and 7 respectively, and now it costs us just $1 to send the title as "7", which can be decoded accurately.

For this system to work with more than one books, we'd have to send the code first, maybe as a list of word/number pairings, then the text of the book itself, as a long string of numbers. Sure, we'd lose a bit in the overhead of sending the code, but if the text was long enough, the savings should be clear in the end.

Of course you're now wondering what this all has to do with images and web design, but let's look at this image right here:

sample GIF

This image is 150 pixels across and 200 pixels tall, for a grand total of 30,000 pixels. Each of those pixels is made up of Red, Green, and Blue values, like "(69,66,37)" for the top left pixel, "(102,120,66)" for the next, and so on. Odds are several pixels are going to share the exact same RGB value (there are, it turns out, 25,859 unique pixel values meaning about 14% of the pixels are duplicates), and some will be so close as to be imperceptably different. So if we could encode pixel values the same way we encoded words and word sequences, we could make the image quite a lot smaller.

GIFs, in fact, work exactly like this, by building a palette colour table for each image, and storing palette addresses instead of RGB values. The colour table for the above image looks like this:

There are 256 colours in this palette. Every pixel in an image using this palette is assigned a palette address, a number from 0 (the top left colour) to 255 (the bottom right). This means that instead of storing a value such as 255,255,255 for a single pixel, a single number like 67, which refers to palette address 67, is used. Already this makes things a little smaller, but GIFs can also compress an image by noticing large blocks of identical colour, and collapsing them into a block, as in "pixels 1 through 20 use address 45", much as phrases could be compressed with words. This makes GIFs very efficient when there are large areas of flat colour.

Here's a very simple, 5 x 5 pixel graphic (magnified to 2000%):

Uncompressed, storing RGB colour information for each pixel, might look something like this:

255   8     8     4     4
255   162   24    12    12
255   242   242   114   114

8     8     8     8     8
162   24    24    24    24
242   242   242   242   242

8     8     8     8     8
24    24    24    24    24
242   242   242   242   242

4     8     8     8     255
12    24    24    162   255
114   242   242   242   255

4     8     8     255   255
12    24    162   255   255
114   242   242   255   255
Or: 
255,255,255;8,162,242;8,24,242;4,12,114;4,12,114;
8,162,242;8,24,242;8,24,242;8,24,242;8,24,242;
8,24,242;8,24,242;8,24,242;8,24,242;8,24,242;
4,12,114;8,24,242;8,24,242;8,162,242;255,255,255;
4,12,114;8,24,242;8,162,242;255,255,255;255,255,255
Or: 
255,255,255;8,162,242;8,24,242;4,12,114;4,12,114;8,162,242;8,24,242;
8,24,242;8,24,242;8,24,242;8,24,242;8,24,242;8,24,242;8,24,242;8,24,242;
4,12,114;8,24,242;8,24,242;8,162,242;255,255,255;4,12,114;8,24,242;
8,162,242;255,255,255;255,255,255

There are four colours in this image, so a four-colour palette might look like this:

1:255,255,255
2:8,162,242
3:8,24,242
4:4,12,114
And the image can then be reduced to: 
1 2 3 4 4
2 3 3 3 3
3 3 3 3 3
4 3 3 2 1
4 3 2 1 1
Or: 
1:255,255,255;2:8,162,242;3:8,24,242;4:4,12,114;1234423333333334332143211

So, because of the way GIFs work, there are some key points to them: