Hacker Newsnew | comments | ask | jobs | submitlogin
What's In A GIF (matthewflickinger.com)
249 points by ch0wn 877 days ago | comments


ChuckMcM 877 days ago | link

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.

-----

micheljansen 877 days ago | link

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...

-----

nudded 877 days ago | link

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.

-----

thesz 877 days ago | link

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

Perhaps not compatible with GIF standard, but very clear.

-----

enneff 877 days ago | link

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

-----

wladimir 877 days ago | link

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).

-----

pornel 877 days ago | link

> 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...

-----

wladimir 877 days ago | link

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.

-----

robin_reala 877 days ago | link

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 :)

-----

icebraining 877 days ago | link

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 ;)

-----

robin_reala 877 days ago | link

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

-----

jayfuerstenberg 877 days ago | link

Thanks for sharing this very useful resource!

-----

blots 877 days ago | link

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

-----

retube 877 days ago | link

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?

-----

wladimir 877 days ago | link

(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.

-----

AndrewDucker 877 days ago | link

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.

-----

satori99 877 days ago | link

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

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

-----

wlievens 877 days ago | link

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

-----

icebraining 877 days ago | link

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

-----

flomo 876 days ago | link

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

-----

ahrjay 877 days ago | link

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

-----

chrislomax 877 days ago | link

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?

-----

simcop2387 877 days ago | link

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.

-----

chrislomax 877 days ago | link

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.

-----

rimantas 876 days ago | link

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/

-----

chrislomax 876 days ago | link

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

-----

simcop2387 876 days ago | link

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.

-----

mseebach 877 days ago | link

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.

-----

xtracto 877 days ago | link

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

-----

rojabuck 877 days ago | link

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

-----

sandal 877 days ago | link

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 :-/

-----

jayfuerstenberg 877 days ago | link

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.

-----

pan69 877 days ago | link

1600 pages of goodness.

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

-----

antirez 877 days ago | link

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.

-----

pkrumins 877 days ago | link

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.)

-----




Lists | RSS | Bookmarklet | Guidelines | FAQ | DMCA | News News | Feature Requests | Bugs | Y Combinator | Apply | Library

Search: