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

---

Why do I Need a Website?

Cost Effective Advertising. Online selling. Increased geopgraphic range. Wider... Read More

5 Tips To Supercharge Your Website Sales Copy

The art of turning website visitors into paying customers depends... Read More

Build It and They Will Come

Build it and they will come is not always true;... Read More

Disability Discrimination Act (DDA) & Web Accessibility

There's been widespread speculation about the new legislation being introduced... Read More

What Hosting Companies Dont Tell You, Could Hurt You?

Did you know that hosting companies overcrowd their servers despite... 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

The Disability Discrimination Act (DDA) & Web Accessibility

There's been widespread speculation about the new legislation being introduced... Read More

Increase Your Affiliate Earnings with a Smart Webmaster Plan

Affiliate programs are a great way to earn an income... Read More

Top 5 Reasons to Track Your Website Traffic

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

Newsletter Management Using PHP w/o mySQL for Beginners

Let's begin by setting some limits. If you're like me,... Read More

Successful Commercial Sites

Do you make your website just to entertain yourself or... Read More

Optimal Website Design

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

Things to Consider Before Starting a Website

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

Art, Artists and the Web: Part 4--What to Do After a Website is Designed

What to do if you are an artist after you... Read More

How to Create a Professional Web Site in 24 Hours

While creating a Web site may seem like... Read More

Developing A Login System With PHP And MySQL

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

Beautiful Web Sites Seldom Make More Sales

Designing an E-commerce Web site is not as simple as... Read More

Why You Need a Website

You hear a great deal about the Internet these days... Read More

Web Development Processes and Technical Environments

The process of Web application development is critical to the... Read More

The Number 1 Reason Most Websites Fail

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

The Problem with Automated Accessibility Testing Tools

An automated accessibility tool is a piece of software which... Read More

Improve Conversion Rates ? Effective Content

Your site is fast and getting traffic, but conversion rates... Read More

How to Get a Knock Out Website!

The first step in setting up an online business...Starting an... Read More

How to Build a Database Driven Web Site

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

7 Reasons Why Your Small Business Needs A Web Site

Many small businesses have the misconception that their business can... Read More

Do You Really Need A Website To Succeed

Rosalind wants to share her inspirational poetry with a wider... Read More

Having a Domain Name And Web Site Gives Your Business The Key To The Door

Just like all things in life, the ways to run... Read More

Whats Your Business Online Attitude?

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

Develop a Solid Website Presence

Starting an internet business can be confusing to non-veterans. The... Read More

Free Webmaster Tools - 7 Things Every Webmaster Needs in Their Toolbox

Webmaster tools are vital to becoming both efficient and effective... Read More

Functions and Subroutines in ASP

Functions and Subroutines in ASP If you read... Read More

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

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

Be Creative Before You Purchase Or Create A Website

Before you jump into spending coutnless hours on designing and... Read More