Web Site Optimization: How To Speed Up Your Web Site By Minimizing Your GIF and PNG Image "Bit-Depth"Are bloated images slowing down your web site and causing you lost business? Images comprise over 50% of
average web page so putting them on a diet is essential to improving web performance. One of best ways to optimize GIFs and PNGs is to minimize “bit-depth” or number of colors within your images.
For palette-based formats like GIF and PNG, file size is directly related to size of color palette, or number of colors in image. As number of colors in an image crosses a power of two, file size jumps. A 33-color image must use a six-bit palette, while a 32-color image can use a 5-bit palette. Smaller palettes mean smaller codes (representing pixel patterns), which makes for smaller files. So minimizing number of colors in index-color images like GIFs and PNGs will minimize file size.
The compression schemes used in GIFs (LZW) and PNGs (Deflate) are dictionary-based encoding algorithms. Dictionary based compression algorithms substitute shorter codes for longer patterns of strings within data stream. Pixel patterns (substrings) in data stream found in dictionary are replaced with a single code. If a substring is not found in dictionary, a new code is created and added to dictionary. Compression is achieved when smaller codes are substituted for longer patterns of data.
The code size is based on number of bits per pixel, and depends on maximum length code within your dictionary. Thus smaller your bit-depth, smaller codes representing your pixel pattern strings, and smaller file.
Choosing right format for your images is first step in optimizing web graphics. At lower bit-depths, banding can appear in smooth-toned images. Try quantizing your image to different palettes to minimize banding.
PNG Compression
PNG uses deflate compression algorithm which is a newer, more efficient cousin of LZW. Deflate is designed to be free of patent problems. Deflate is a combination of LZ77 algorithm found in zip programs like WinZIP and gzip, and Huffman coding. Deflate typically compresses files 20 to 30 percent smaller than LZW, which is difference you'll find between gzip and compress. PNGs use a similar substitution technique, but are generally 5 to 25 percent smaller than GIFs, although there are exceptions. In addition to horizontal "scan-line" pattern substitution PNGs sometimes substitute for vertical patterns. PNG can also truncate color palettes. In general, smaller color palette, smaller overal file size.
