Optimizing Animated GIFs
Take the Penguin Challenge
By Andrew B. King
In the sixteen months since they first appeared on a Web page, animated GIFs have spread through the Web like wildfire, and with good reason: They're easy to make, easy on servers, and ideal for smaller animations. Finding GIF images that are browser friendly and small in file size is another matter, however. This article shows how to create what we think are the smallest possible animated GIFs. If you think you can do better, we invite you to take the penguin challenge (more on this later). I'll walk you through an animation we optimized for coolcentral.com, and discuss the specific issues, techniques, and available software.
Background
Webmasters usually base a site's design constraints on its content and its visitors' available bandwidth. The typical maximum size for a Web page, including all its embedded objects, ranges from 20 to 30K per page, which translates into an average total download time of about 10 to 15 seconds for a 28.8 modem.
When we designed coolcentral.com, we wanted an eye-catching look with lots of movement that didn't take long to download. We set a limit of 30K total per page and chose a single visual theme: an iceberg, with melted portholes showing movement outside the berg. The first two pages have four animations, a static logo, and a seamless background "ice" JPEG. Feathering the foreground graphics made the background graphic appear to be the foreground, and vice versa. After deducting for our 1.2K background and 4K of text, we realized each GIF could be no greater than 5K in size.<>
