Imitate animated GIFs with PNGs

When working on an animation showing a demo of Sublime Text 2.0, Jon Skinner had a few problems with mainstream solutions, detailed in his article, Animated GIFs the Hard Way:

  • GIFs with always large in size and only had up to 256 colours.
  • The animation had to work with IE6 and mobile browsers, so Flash and HTML5 video were not an option.

But, that’s pretty much all that’s available.

For that reason, he decided to write his own Python script to compile an animation from a series of PNG files. The script extracts the differences between the frames and outputs a single PNG with all the “diffs” between every frame, along with some JSON data indicating where every bit goes up and when.
The animation made from PNG crops… shown here in an animated GIF.

Apple was reported to use a similar technique for some animations on their Web site today, notably the page for their Mac Pro, when viewed in Firefox. (Then again, they also still use the outdated Scriptaculous JS library.)

The article and the code by Jon were written about 3 or 4 years ago, but the age doesn’t make it less of a viable solution. If you see the animation on his article, you’ll notice the entire animation was loaded in less than 100 KB. Compare it with the poor-quality animated GIF above weighing about 460 KB and its crystal-clear source capture video of about 1.6 MB. Sounds like the single PNG image with the JSON data are winning here.

Frames are painted on an HTML5 <canvas>, but they’ll be displayed in positioned <div> tags if a browser doesn’t support the former.

If you need to create an animated demo similar to the above shown above that works in most browsers, Jon’s anim_encoder might be a solution for you to consider.

Leave a Reply