Website Optimization - Replace GIF with PNG Images

Website Optimization is announcing it’s new "speed tweak of the week" illustrating how to speed up your web pages and save bandwidth by replacing your GIF images with PNG images. Andy King illustrates why PNGs are a more efficient, flexible, and patent-free replacement for GIFs.

Replace GIF with PNG Images

The Portable Network Graphics (PNG) format is designed to be a more efficient, flexible, and patent-free replacement for GIFs. PNG is designed to store a single bitmapped image to display over computer networks (1). PNG was created in 1995 as a response to Unisys' enforcement of their patent on the LZW compression algorithm used in GIFs. While Unisys' patent has expired, the reasons for switching to PNGs from GIFs remain (2). By replacing your GIFs with PNGs you can speed up your web pages and save bandwidth.

PNG versus GIF Compression

PNGs uses the deflate compression algorithm typically with a 32KB sliding window. Deflate is an improved version of the Lempel-Ziv compression algorithm (LZ77) used in ZIP and GZIP files (3,4). Created by Phil Katz for version 2 of PKZip, deflate combines LZ77 with Huffman encoding and is 10% to 30% more efficient than LZW at lossless compression. Like gzip, some PNG compression tools have an optional "compression ratio" with values ranging from one to nine. Six is the default. Nine is almost always the best setting for maximum compression ratio.

Not surprisingly, images saved as PNGs are typically 10% to 30% smaller than GIFs, although in rare cases they can be larger (5,6). In our tests, we found some images can compress 40% to 50% smaller or more (over 85% in one example) depending on the image. Typically images with large flat areas of color compress better than smooth-toned images with many color transition areas.

PNG Features

PNG has a number of features that make it appealing to the medical and graphics industries. Fireworks uses the PNG format to save its internal files, and PNG's 16 bit grayscale capability makes it useful for accurate radiological imagery. PNG prefilters the image data using predictor functions, one of which is "Up" which looks for similarities in vertical patterns for full-color PNGs. Indexed color PNGs (8 bits or less) usually do not benefit from filtering, so use "none" when there is a choice. For true-color or grayscale images, use Adaptive.

"The place PNG is most commonly used for 24-bit RGB (even final versions) is rendered images such as ray-traced scenes (with minimal use of textures) or mathematical objects; they have artificially smooth color transitions that work well with PNG's filters. Some fractals may be amenable to the same treatment, but many of the best ones have very noisy sections that compress quite poorly." - Greg Roelofs (7)

For web use, the PNG8 (8-bit) is the form of PNGs that designers use to replace GIFs. PNGs can have an alpha value for each color in the palette, which effectively means the palette is RGBA, not RGB-with-one-exception like GIF. This lets you trade off color fidelity for transparency and still retain the size advantage of an 8-bit image versus a 32-bit one. PNGs can also work with one level of transparency, just like a GIF89a. The PNG compression algorithm looks for repeated horizontal patterns like GIF's LZW compression scheme. Interlaced PNGs can also be recognized after about only 25% of the file has downloaded, as opposed to GIFs which require about 50% of the file to be downloaded before recognition (8). Although there are some rare exceptions, replacing your GIFs with PNGs will significantly reduce the size of your images.

Here are some of PNGs features:

* 8 bit (palette mapped), 16 bit grayscale, or 48 bit true-color images
* Alpha transparency to 16 bits
* Gamma correction
* Improved compression over LZW
* 2D Interlacing Scheme (Adam7)
* Metadata (compressed or uncompressed)
* Patent-free format

PNG Browser Support

Netscape has limited native PNG support since version 4.04 and for Internet Explorer it depends on the operating system. For Macintosh, IE has supported PNG natively since version 5.0 with full alpha-channel support. MSIE for Win32 and Unix supported PNG natively (albeit poorly) since 4.0, but it didn't get native alpha support until 7.0. The vast majority of browsers in use today support PNGs with 1 bit of transparency however, which nicely replaces the single-image GIF format. That is why we switched to PNGs a few months ago for our Bandwidth Report and this Speed Tweak column.

Animating PNG Files: MNG versus "PNG+"

The Multiple Network Graphics (MNG) format is the multiple image version of PNG, analagous to GIF89a. However, the MNG format is more complex and not supported by current browsers (must use a plugin, free libmng). There is an effort afoot by a couple Mozilla engineers to overload the (single-image) PNG format with additional frames for animations (9). There is also an counter-proposal by members of the PNG group to do something similar but in a way that doesn't violate the PNG specification. Both efforts are much simpler than MNG, and both are up for votes by the PNG group. For now, an animated image is best done with a GIF89a, or Flash.

Steps for Smaller PNGs

PNGs work best with large areas of flat color. Minimize the amount of noise in your images to maximize contiguous flat areas of color to maximize compression. Minimize dithering, although with smooth-toned images dithering allows lower bit depths. Avoid anti-aliased text to minimize the number of necessary colors in your final image. Minimize the number of colors in your initial image, if you have control over this factor. Avoid interlacing with PNGs for minimum file size as the seven-pass interlacing scheme can add 20 to 35 percent to PNG file size. Finally, use PNG optimization software that has been proven to create small PNGs, like Ken Silverman's PNGOut.

GIF versus PNG Images

To see the improvement you can expect switching from GIFs to PNGs we compressed some sample images (see Figure 1). The PNG version of the broadband chart is 35.6% smaller than the equivalent GIF image.

For the full “Replace GIF with PNG Images” article, see http://www.websiteoptimization.com/speed/tweak/png/

About Website Optimization

Don't Make Me Wait! The new book titled "Speed Up Your Site – Web Site Optimization" by Andy King, and the companion web site are about designing "speedy" web sites with techniques that…

* Cut file size and download times in half
* Speed up site load time to satisfy customers
* Engage users with fast response times and flow stimulus
* Increase usability, boost profits, and slash bandwidth costs
* Improve search engine rankings and web page conversions

Andy King is also the founder of WebReference.com and JavaScript.com, both award-winning developer sites from internet.com. Created in 1995 and subsequently acquired by Mecklermedia (now Jupitermedia) in 1997, WebReference has grown into one of the most popular developer sites on the Internet. While he was Managing Editor of WebReference.com and JavaScript.com, Andy became the "Usability Czar" at internet.com, where he optimized the speed and usability of their sites. In addition to his consulting work, he continues to write the monthly Bandwidth Report and the “Speed Tweak of the Week” for www.websiteoptimization.com.