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:

Senior Web Developer  Pedestrian TV
Full Stack Web Developer  Charlotte Agenda
Front End Developer  Charlotte Agenda

7 Questions to Understand Your Customer Better

Customer service questionnaires can help your clients better understand their... Read More

Why A Simple Counter is Never Enough for Your Website

A simple website stats counter is not enough if you... Read More

Five Reasons You Have to Stop Your Web Site

That's right. Your method, behavior and strategy you are now... Read More

Set Up Your Website in Minutes ? For Free

There was a time not long ago when setting up... Read More

How Disabled Users Access The Internet

In 1995 a new era of accessibility for disabled people... Read More

Are You Being Scammed By Your Web Design Company?

This is a growing concern amongst many business owners. Does... Read More

Whats Your Business Online Attitude?

This article was prompted by some customer support work I... Read More

Web Sites ? Should I Learn or not?

A common dilemma most small and medium businesses face when... Read More

Why Your Brick-and-Mortar Biz Needs A Website

The internet has taken over our lives with a vengeance,... Read More

What Business Owners MUST Know BEFORE They Commit To Having A Web Site

Q1.Why would I need a web site? A1.- Improve my... Read More

Let Your Customers Redesign Your Website!

When you purchase a new item from a Yahoo! Store,... Read More

Email Addresses in Web Pages

You want to give your site's visitors a way to... Read More

Why a CSS Website Layout Will Make You Money

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

High Quality Website at Low Cost

Although designing a great web site is an important part... Read More

Do You Need a Web Database?

Does My Web Site Require A Web Database?If your web... Read More

7 Reasons Why Your Small Business Needs A Web Site

Many small businesses have the misconception that their business can... 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

Developing A Login System With PHP And MySQL

Most interactive websites nowadays would require a user to log... Read More

Create Huge Income From Your Web Site - 10 Easy Ways

The cost of setting up a web site is dirt... Read More

How Did You Get Here?

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

For Newer Sites, Web Marketing Depends On Titles & Links!

We all start out the same. Some have budgets, some... Read More

Marketing Your Business Online

As a business you can't afford to ignore the Internet... Read More

Live Support from Your Website? Can You Do It for Free?

I'm a freelance programmer and somehow I managed to get... Read More

Improve Conversion Rates ? Load Times

Your site is getting traffic, but conversion rates are horrible.... Read More

Using Psychology Easily on Your Website to Make More Sales!

Psychology is a long word which everyone thinks, "no, that's... Read More