Programming

Animated GIFs the Hard Way & Using Them For Realtime text communication

When doing the new website for the Sublime Text 2.0 launch, instead of just screenshots, I wanted to have animations to demonstrate some of its features. Animated GIF files would have been a candidate, except for two issues: the 256 color limitation, which would have made the animations ugly, and the encoders I tried spat out huge files, at almost 1MB per-animation.

Instead, I wrote a small Python script that takes a collection of PNG frames as input, and emits a single packed PNG file as output, which contains all the differences between the frames, and some JSON meta-data specifying which bits of the packed PNG file correspond to each frame. JavaScript turns the PNG and JSON into an animation, using either the canvas element, or emulating it using overlaid div elements for older browsers.

via Animated GIFs the Hard Way.

If you think that’s crazy, check gifsockets

This library demoes how to achieve realtime text communication using GIF images as transport. The idea is pretty simple.

We use Animated Gif images to stream data in real time to the browser. Since a gif image doesn’t specify how many frames it has, once the browser opens it, it will keep waiting for new frames…

Amazingly, both work on IE6, according to the devs.

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *