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 the average web page so putting them on a diet is
essential to improving web performance. One of the best ways to optimize GIFs
and PNGs is to minimize the “bit-depth” or the number of colors within
your images.
For palette-based formats like GIF and PNG, file size is directly related to
the size of the color palette, or the number of colors in the image. As the
number of colors in an image crosses a power of two, the 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 the 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 the data stream. Pixel patterns
(substrings) in the data stream found in the dictionary are replaced with a
single code. If a substring is not found in the dictionary, a new code is created
and added to the dictionary. Compression is achieved when smaller codes are
substituted for longer patterns of data.
The code size is based on the number of bits per pixel, and depends on the
maximum length code within your dictionary. Thus the smaller your bit-depth,
the smaller the codes representing your pixel pattern strings, and the smaller
the file.
Choosing the right format for your images is the 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 the 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 the 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 the 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, the smaller the color palette, the
smaller the overal file size.
Conclusion
To minimize the file size of palette-based image formats like GIF and PNG,
minimize their bit-depth, or number of colors. Each time you pass a power of
two, file size jumps higher. By minimizing the number of colors, and maximizing
the flat-color areas you will create smaller, more efficient images destined
for the Web.
Further Reading:
LZW Data Compression
http://www.dogma.net/markn/articles/lzw/lzw.htm
Mark Nelson breaks down the LZW compression algorithm for Dr. Dobb's Journal
of October 1989.
Multimedia: Use Lossy Compression for Smaller GIFs and PNGs http://www.websiteoptimization.com/speed
weak/lossy/
Lossy compression lets you squeeze more bytes out of your GIFs and PNGs. Lossy
compression increases identical pixel patterns to improve compression in indexed-color
images.
Multimedia: Use Weighted Optimization
http://www.websiteoptimization.com/speed weak/weighted/
Weighted optimization or regional compression applies different degrees of compression
to different areas of your image. By varying the quality within images you can
improve file size.
Optimizing Web Graphics
http://www.websiteoptimization.com/speed/12/
Chapter summary from Speed Up Your Site, shows how to correct, optimize, and
compress images for minimum file size and maximum quality.
PNG Home Site
http://www.libpng.org/pub/png/
Greg Roelofs site devoted to all things PNG.
About the Author:
Andy King, author of the popular new book titled "Speed Up Your Site –
Web Site Optimization". Visit Andy King's web site to learn the best Web
Site Optimization practices for higher traffic and speed guaranteed. www.websiteoptimization.com |
