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/tweak/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/tweak/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

Article by 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

In The News:

pen paper and inkwell


cat break through


From Search to Sale

The Internet car buyer is an elusive animal. Trying to... Read More

The Dos and Donts of Launching a Small Business Website

Launching a new small business website is often a long... Read More

Creating Compelling Content , Write It and They Will Come

In a previous ezinearticles.com article,"I Need real visitors, Not Search... Read More

How to Make Your Own Website For Free

If you like the Internet and surfing through the billions... Read More

FREE Amber Alert Tickers for Your Website

Project Safekids provides webmasters a valuable tool which could save... Read More

If Its Done Its Done for: Make Your Website Part of Your Business before You Build

Web sites are an Ongoing Part of Business.All too many... Read More

Have You Got Your Ear To The Ground Or Your Head In The Sand?

What happened on your website yesterday? What about last week... Read More

Credibility - 10 Ways to Build it on Your Website

If you have your own business website and you are... Read More

Getting a Web Site Can Be Fast, Easy, and Inexpensive When You Know Your Options

So what do you do if need to get a... Read More

Topics to Add When Creating an Alternate and Modern Medicine Web Directory

Alternate medicine finds its own place in the hearts and... Read More

Make Your Web Site User-Friendly!

Making a web site is easy. Making a good web... Read More

The 5 Biggest Mistakes Almost All Web Designers Make

Huge Mistake #1: Creating a Website with Flash -- Did... Read More

The Secret Benefit Of Accessibility: Part 1 - Increased Usability

Web accessibility has so many benefits that I really do... Read More

How Did You Get Here?

When marketing your website, it's important to know which of... Read More

Get Your Business on the Web

I can't think of any business alive today that couldn't... Read More

My Yahoo Search - Beyond Bookmarks

Yahoo has long offered email, an online calendar, notes, bookmarks,... Read More

10 Things You Should Be Monitoring On Your Website

Every business needs to know how it is doing. That's... Read More

Your Website Should Be Selling

It may come as some surprise to a traditionally off-line... Read More

Adding Word Rich Content to Your Website

You have permission to publish this article electronically, in print,... Read More

Why a CSS Website Layout Will Make You Money

Although CSS layouts have been around for years, they haven't... Read More

A Beginners Guide to Server Side Includes

An Introduction to Server Side IncludesBeginner? That's OK!While much has... Read More

Is Your Website Doomed for Failure Before Youve Built It?

One of the things that many people overlook when building... Read More

Creating Dynamic Website Content with PHP - MySQL

Fresh website content for your visitors can be of real... Read More

Top 5 Reasons to Track Your Website Traffic

#5 User Satisfaction: Learn what your visitors and site users... Read More

PHP & Account Activation

When a user signs up at your website, you may... Read More

Why Do I Need A Web Site?

Even though the Internet has been around for a long... Read More

Website Success is Key

The popular search engine Google indexes over 8 billion websites.... Read More

Benefits Of An Accessible Website: Part 2 - The Business Case

The DDA (Disability Discrimination Act) states that service providers must... Read More

How To Convert More Sales On Your Website

One of the biggest mistakes that most online retailers make... Read More

Bring Your Visitors Back Clamoring for More! Maintain and Improve Your Web Site Weekly - Part 1

80% of your Web site is Maintenance!Once your Web site... Read More

Things to Consider Before Starting a Website

In the time that I have been using the Internet,... Read More

4 Marketing Tips for Resourceful Webmasters!

The internet is a sea of knowledge. Getting your information... Read More

Learn What 98% of Targeted Visitors Do On Your Website

Getting a Targeted Visitor to a website is a waste... Read More