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
I can't think of any business alive today that couldn't... Read More
Why do some web sites reap huge benefits while others... Read More
There are millions and millions of websites on the Internet.... Read More
Building a new website can be a lengthy task. From... Read More
You've just finished congratulating your marketing team. After six months... Read More
One of the things that many people overlook when building... Read More
Web sites are an Ongoing Part of Business.All too many... Read More
The definition of the phrase "Content Management" depends on what... Read More
After planning the design and content of your website, it's... Read More
80% of your Web site is Maintenance!Once your Web site... Read More
In about the Time it takes to Watch a Reality... Read More
People like to get immediate responses to requests. Autoresponders are... Read More
If you were asked to put a value on your... Read More
The needs of screen magnifier users are overlooked when implementing... Read More
Creatively marketing your corporate site takes time in the set... Read More
Like any area of business your website needs some effort... Read More
"If you build it, they will come"; is an age... Read More
Cost Effective Advertising. Online selling. Increased geopgraphic range. Wider... Read More
Most interactive websites nowadays require data to be presented dynamically... Read More
Everywhere you look these days, people are telling you that... Read More
There are many different traffic analysis tools, ranging from simple... Read More
It may seem like the publishing industry's equivalent of Beanie... Read More
RIVERSIDE, CA August 4, 2004 ?- "Historically, small business owners... Read More
In 1995 a new era of accessibility for disabled people... Read More
Functions and Subroutines in ASP If you read... Read More
Are bloated images slowing down your web site and causing... Read More
I recently received an unsolicited e-mail from some company offering... Read More
So you want to have a website. You have gone... Read More
More and more non-profit organizations are developing websites to help... Read More
So you've decided to start an online work at home... Read More
Creating a content management system either from scratch,... Read More
When I started my company in 2002, I knew I... Read More
In this day and age most businesses consider having their... Read More
It amazes me how many people try to build serious... Read More
The "robots" meta tag, when used properly, will tell the... Read More
Did you know that hosting companies overcrowd their servers despite... Read More
Your business website is a critical aspect of being able... Read More
"If you build it, they will come"; is an age... Read More
When you consider the billions of individuals and companies on... Read More
The DDA (Disability Discrimination Act) states that service providers must... Read More
Yahoo has long offered email, an online calendar, notes, bookmarks,... Read More
Today it seems everyone is jumping on the entrepreneur bandwagon,... Read More
When building a relationship, listening is more important than talking.A... Read More
What to put your the website if you are an... Read More
You know exactly what your organisation does and what your... Read More
What is the point of having a website, you may... Read More
Three way linking and concerns.For many years SEO experts were... Read More
An automated accessibility tool is a piece of software which... Read More
If you've been developing websites on Mars for the past... Read More
Launching a new small business website is often a long... Read More
Setting up a website is the very first step of... Read More
Developing a website with content that entices visitors to return... Read More
In a previous ezinearticles.com article,"I Need real visitors, Not Search... Read More
"I have a small business with just a couple of... Read More
Thousands of people are now making a living online and... Read More
Understanding and using web analytics.In recent years, website marketers were... Read More
In the region where my company is located, South Bend,... Read More
Directory Generator, a product from Armand Morin and Marc Quarles,... Read More
Research reveals three important facts:1) The Internet is one of... Read More
You don't believe in astrology but you check your horoscope... Read More
A lot of people these days are interested in getting... Read More
The internet has taken over our lives with a vengeance,... Read More
Design and layout can make your communication come alive and... Read More
An additional benefit of website accessibility is an improved performance... Read More
One of the biggest mistakes that most online retailers make... Read More
If you're looking for better web site ROI, chances are,... Read More
Web Development |