Home

Feature Article:

Easy Steps To Website Development and Promotion
One of the most important parts of establishing a new website is website development and promotion. For people to visit your new site, you have to attract them. After spending so much time drawing up your website, you must also think of ways to...
...Read More


Web Site Optimization: How To Speed Up Your Web Site By Minimizing Your GIF and PNG Image "Bit-Depth"

Additional Reading

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.

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

 

More Reading:


Get It All with Good Web Content

PHP and Cookies a Good Mix

Absolute Relative Links How Do They Rank

Color Psychology in Marketing

Youve Got a New Website But How Do You Get Folks to Look at it

 
Website Theft Part 1 of 3 What exactly is Copyright

8 Steps to Design a Surfer Friendly Website That Search Engines Love

Seven Things to do NOW to Look Good ALWAYS

How To Build Your First Web Site

Email tips and tricks


Optimizing for Visitors not Search Engines
Most people feel that optimizing is to target the search engines alone. In my opinion, this is not the only case. Optimization requires a balance of traffic enhancements and a user friendly atmosphere that provides clear navigation. Most will...
...Read More

Protecting Your Business From Spam
Even being as careful as possible with my email address, I still used to receive more than 100 email messages a day, which is no exaggeration. Only about 10% of those emails were from people that I knew and the rest of the messages were unwanted...
...Read More

10 helpful tips to follow when switching web hosts
You've made your decision to move from your website from your current web host to a new web host. The following tips will help you make the transition easier and make you aware of some potential pitfalls to avoid. 1) Make sure the new web...
...Read More

The Secret Benefit Of Search Engine Optimisation: Increased Usability
A higher search ranking is what many website owners dream of. What they don't realise is that by optimising their site for the search engines, if done correctly, they can also optimise it for their site visitors. Ultimately this means more...
...Read More

Color Psychology for webpages
Colour is an aspect of a website that is often picked haphazardly and without any thought from a beginner web designer. The lesser known quality of the colour of a website is that it can greatly affect the mood of your visitors. It is because of...
...Read More