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

---

You Need a Website!

No matter the size of your business, having a web... Read More

1 Simple Solution to All Internet Marketers about Their Website Design Needs

It is an undeniable fact that not everybody is keen... Read More

Why Every Small Business Owner Needs Two Websites

Every small business owner knows that they need a website,... Read More

Warning: The Truth About Having a Web Site!

If you don't have a web site yet, are thinking... Read More

Where?s Your Web Site?

This simple question can take on several different forms, but... Read More

Optimal Website Design

Optimal website design is the art of logical navigation.It will... Read More

Creating Dynamic Website Content with PHP - MySQL

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

Do This One Thing to Create a Powerful Product-Selling Web Site

Spend time planning your Web site. Before you design a... Read More

Better Web Site ROI: Efficient Online Business with SEO, PPC, Split Testing, and Forums

If you're looking for better web site ROI, chances are,... Read More

Are You Losing Sales Because of These 4 Simple Website Mistakes?

Losing website sales and traffic is sometimes simply a case... Read More

How to Build a Database Driven Web Site

If you ever want to create a state directory, article... Read More

Website Survival Guide

In the big, wide online world there are millions of... Read More

The Number 1 Reason Most Websites Fail

Failure, just like success, is measured differently by each and... Read More

A Web Site for Your Small Business: How to Set Up a Website

Your web site will be your window to the world.... Read More

Find the Purpose of Your New / Proposed Website

Absolutely everything stems from the purpose of your website -... Read More

Maximizing ROI via Web Site Traffic Analysis

We are clearly well past the innocent "golden age" of... Read More

How to Promote Your Law Firm Website On the Internet for Maximum Profit

Making maximum profit from your law firm website is important,... Read More

What Hosting Companies Dont Tell You, Could Hurt You?

Did you know that hosting companies overcrowd their servers despite... Read More

What Your Customers Say About YOUR Site! Part 1

The following is a list of patterns that many visitors... Read More

7 Golden Rules For Building Mini Sites

First, an eye opener. Making your fortune through affiliate programs... Read More

10 Things You Should Be Monitoring On Your Website

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

Beware the Software Siren

I've heard several prominent web marketers mention in their classes... Read More

Abandonment - Why Visitors Don?t Turn Into Customers

Every good Internet business understands the value of conversions versus... Read More

Website Sales: 10 Reasons Why People Dont Buy From You

You've put up a website to promote a product or... Read More

Make Your Web Site Stand Out

When visitors add your web site to their Favorites or... Read More

Making Your Websites More Compelling

The Internet is a remarkable publishing medium. With just a... Read More

Do Dancers Need A Website?

Dance is how you pamper your soul and satiate your... Read More

How Your Own Website Helps Your Small Business Grow

What do you mean, you don't have a website for... 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

If You Build It, They Will Come?

Building a new website can be a lengthy task. From... Read More

So You Want To Have A Website

So you want to have a website. You have gone... Read More

User Interface Design: Key to Achieve Best Web Development

From early days of www, the Internet sites that are... Read More

Make Your Communication Come Alive

Design and layout can make your communication come alive and... Read More