Good read. I just noted that Wikipedia also has quite an elaborate description of the GIF format: http://en.wikipedia.org/wiki/GIF#Example_GIF_file

as well as for PNG: http://en.wikipedia.org/wiki/Portable_Network_Graphics#Techn...

This is an excellent document for visual thinkers. I wish there were more of them. It reminds me of my dog eared copy of TCP/IP Illustrated. Now that the patents have all lapsed on GIF images it would seem to be a candidate for coming back but of course the PNG standard has made great progress in the mean time.

For a long time, and perhaps today, GIF was the most reliable way to have a diagram in a web page that would display like you expected. I keep hoping that SVG support will rise to the level that GIF support had in its hey day then I can have a web page that goes from phone to 24" display and the drawings still look nice.

I have recently implemented a basic GIF parser and writer in Haskell for a school project. The code can be found here: https://bitbucket.org/nudded/gif-parser/src/

I think it shows how easy it is to write parsers in Haskell. Don't bother to look at the LZW decode and encode, it's rather dirty.

Quite clear LZW: http://rosettacode.org/wiki/LZW_compression#Haskell

Perhaps not compatible with GIF standard, but very clear.

A clear & approachable piece of documentation. What a fantastic resource a library of such documents, for numerous major data formats, would be.

I've thought about writing a book on that.I've had to implement bits and pieces of PDF,PNG,JPG,and TTF and learning this stuff has been fascinating.

I did write one article and also did a short video on this stuff, but could think about expanding that if there is sufficient interest.

http://www.youtube.com/watch?v=BLnOD1qC-Vo http://practicingruby.com/articles/shared/oelhlibhtlkx

My work so far has been in Ruby but I'd probably want to at least look into how to do this sort of stuff in C or some other low level language, because things like alpha channel splitting in PNG is painfully slow :-/

I remember reading tomes to understand how to parse BMPs and PICs back in the DOS days for display in Mode 13h.

If I had an articulate page like this my life would've been a lot easier.

1600 pages of goodness.

http://www.amazon.com/Programmers-Guide-EGA-Super-Cards/dp/0...

Related: Rob Pike's article on GIF decoding with Go: http://blog.golang.org/2011/05/gif-decoder-exercise-in-go-in...

Nice and clear overview!

But GIF? Is that format even still used?

I'd love to see this for webp, I really don't get that format yet and AFAIK there is no overview of the format that is not a spec (i.e., horribly detailed).

> Is that format even still used?

http://httparchive.org/interesting.php

34% of images on the web.

The Web needs education first, not another image format that those websites won't use...

Wow that's shockingly many still. But that statistic is to be expected somehow, there's a lot of old sites still around. Still it's a horrible, incredibly restricted format.

I come from a computer graphics background an thus am interested in image formats and how they work... whether the web "needs" webp doesn't really come into it.

To be fair, the vast majority of the web is built and never touched again, so I’m not surprised about that figure.

Regarding WebP, it’s nice to have options, but ImageOptim is getting PNGs down close in size for me :)

Not true, a ton of sites go offline after a few years. If Geocities was still around it'd probably skew that value way up ;)

Geocities is still around (under a different name): http://reocities.com/

What about all the smileys? Does that account for the 34%?

Thanks for sharing this very useful resource!

Well gifs still have two main use-cases:

- with the rise of AJAX a gif is basically the default format for the animated "loading" spinners

- crappy low-res instant versions of youtube videos

Is there an alternative format?

(1) is indeed a use-case, unless you require more detailed control over playback/pause/frame numbers. In which case a series of png images (for example, encoded into a .css) and animated using javascript could be used. Google uses this for their doodles.

I think (2) is not really a good use-case. GIF is a terrible, terrible format for movies because of the crappy quality and inefficient interframe encoding. Just use a movie format, they're also good at low-res low-bitstream.

Using a movie format means that you either have to provide multiple versions for different browsers or you have to use Flash.

For a four-second clip of a man being hit in the face with a cat I'm not sure either of those is worthwhile.

I'd think CSS sprited PNGs are much preferred over anigif, not just because of playback control but also because of non-shitty translucency.

(2) is used alot by porn sites (So i hear).

Mouse hovers show an animated GIF representation of the 'film' as a preview.

There are decent (and scalable!) spinners in CSS, but it's not an alternative since not every browser supports them.

Firefox and Opera support the APNG format and there is a clever polyfill[1] to add support to all other browsers.

[1] https://github.com/devongovett/png.js

Beyond AJAX spinners, there's still plenty of use cases for simple & easily embedable animations. Smilies, forum avatars, icons, etc.

Am I missing something here? Why would a GIF not still be used? We use them all the time for less detailed images to keep file sizes down?

I've generally avoided GIFs myself, originally because of patents. Lately though it's because with optipng/pngcrush being told to try every possible compression option on them I can usually get small images down to under 500 bytes, sometimes much better than I could ever do with a GIF. This seems to mostly be due to the fact that around certain sizes a true color PNG may compress better than a palleted image.

Interesting, I wasn't being a dick asking that. I was genuinely interested on what I was missing out on. I don't understand images to anywhere near the extent of most people commenting here but I was interested enough to try and understand the article, "try" being the operative word.

In most cases you will get better results with PNG. PNG has a slightly bigger overhead, so GIF wins for extremely tiny images (with a size about a dozen pixels or less) but after that more advanced compression algorithm in PNG wins. However, you have to remember to choose the right type of PNG (there is no sense in saving black-and-white lineart as true-color PNG). PNG also may containt chunks of additional info, you can get rid of them too. Also, there is an interesting PNG8 format which allows you to have alpha transparency with indexed color palette in supporting browsers, but in IE6 it will behave just like gif with index transparency (pixels having any transparency will appear completel transparent). See http://www.sitepoint.com/png8-the-clear-winner/

That is really cool, thanks for the tip

Whenever I save an image as a PNG it is almost certainly bigger but I let PS do the work for me these

I'll take a look at this format as it seems to be a really clever time saver of having to render a version of each image twice

I'd also definitely take a look at some of the png optimizers. They work by tweaking the parameters of the compression so it's a lossless operation (some of them will do some depth reduction in a lossless way if possible, but that doesn't always bring in better compression). Photoshop has been somewhat well known for not always producing an optimized png.

I think the GP is confusing an interesting general knowledge piece with something that should be immediately relevant to his day-to-day work.

You probably don't want to be crafting GIF binaries directly anyway, there are tons of libraries that take care of the plumbing for you very competently.

I think the "loading" animated icons you see in all those AJAX applications are just GIFs. It makes sense.

I once wrote node-gif (https://github.com/pkrumins/node-gif), a node.js library for creating animated gifs. (Note: it only works with the old node 0.2.x.)

generating GIF in pure Tcl (2004) https://github.com/antirez/gif-pure-tcl

I remember that when I was playing with this code I was pretty shocked by the elegance of LZW.