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

---

KISS Your Website!

Many web developers today are starting to KISS their website,... Read More

Creating Dynamic Website Content with PHP - MySQL

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

9 Simple Steps to Create a Background Tiled Image Branded with Your Name

You have seen those web pages where they have the... Read More

Disability Discrimination Act (DDA) & Web Accessibility

There's been widespread speculation about the new legislation being introduced... 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 Web Templates Are Helping Online Businesses to MultiplyTheir Income

Web templates by nature are created to aid and ease... Read More

HTML Editors - How to Choose the Right One for Building Your Websites

There are lots of HTML editors on the market, however,... Read More

The Number One Reason Most Websites Fail

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

Web Content Strategy 101

Your content is what gets you in search engines, speaks... Read More

Building a Great Intranet Taxonomy

While it may seem like a "quick and easy" task,... Read More

Seven Daft Things Not To Do To Your Website

1. Splash pagesMost of the time splash pages are uncalled... Read More

Writing Effective ALT Text For Images

Anyone who knows anything about web accessibility knows that images... Read More

Functions and Subroutines in ASP

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

Benefits Of Making Your Website Accessible To Disabled Users ? Part 2: The Business Case

The Disability Discrimination Act states that service providers must not... Read More

Beyond Web Usability: Web Credibility

If you've been developing websites on Mars for the past... 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

Traffic for Webmasters

"If you build it, they will come"; is an age... Read More

Internet Marketing Website Promotion -The 7 Biggest Mistakes I See People Make With Websites!

1. Many people are not getting good or complete advice.... Read More

Business Website Building Do?s and Don?ts

First, using a lot of web graphics, flash, banners and... Read More

Web Content: How Much Should I Pay?

When web content gets discussed on webmaster bulletin boards, the... Read More

Building eCommerce Websites that Work - Part 3

An interesting eCommerce success factor that isn't precisely overlooked, but... Read More

Non-Profits: Successful Online Strategies

More and more non-profit organizations are developing websites to help... Read More

Credibility - 10 Ways to Build it on Your Website

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

The Evolution Of Search

There have been many significant changes to the face of... Read More

But My Business Doesnt Need A Website!

Revenues are often lost because many business owners don't see... Read More

Is Your Web Site Talking to Your Customer?

A while ago one of my clients approached me and... Read More

MySQL Database Handling in PHP

Most interactive websites nowadays require data to be presented dynamically... Read More

I Did It: Six Months to a Successful Website

For years now I've been looking to start my own... Read More

7 Tips to Make Your Order Page Work Harder

So your prospect, Mary, is sitting at the computer reading... Read More

The Top Ten Benefits of Having a Web Site

Do you need a web site? Are you considering getting... Read More

How to Create Sizzling Sales online

"Don't Sell the Steak, Sell the Sizzle."Have you heard of... Read More

Maximizing ROI via Web Site Traffic Analysis

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

Ebooks for Webmasters

Internet has opened a whole new world for web developers... Read More