What does it mean to Color Reduce?
Chances are, I’m going to use a technical phrase or speak some other form of geek that may not translate well into your common vernacular. In those cases, contact me as IreneQ did when I used the phrase “color reduce” in a recent post. Here is the comment she left:
)Irene, first off, I should be the one apologizing, not you. Thanks for pointing out my geek speak and as a result, giving me a topic that need discussion. Let me see if I can break it down for you, and if not, you know how to reach me.
When I say “color reduce” you should think “compression.” Most of us who have worked on the Internet, and before that, with various dial-up services have dealt with compression in some form or another. For example, Stuffit for Mac, gzip for *NIX/Linux or pkZip for the PC are all file formats that take big files and make smaller versions of them that transmit between computers faster.
Now if that is too technical, here’s another analogy that might work. When you go camping, especially if you’re going to do any sort of hiking, you only take essentials — and only one of each (no redundancies). You then make sure that those items you take are tightly folded or rolled and stuffed into your backpack using as little space possible so you can get more essentials in your bag, and not carry as much weight on your back.
Think if it another way. Whenever you watch Olympic sprinters, you’ll notice they wear a bare minimum of clothing. Less weight on their bodies, and less material to catch the air and work like a parachute against them, makes these runners as fast as possible.
Color reduction is similar to such processes so images on my web server get to your web browser as fast as they possibly can while still conveying the essence of the image.
Avoiding as much long-winded mathematical analysis as I can, I’m going to give you a quick idea on how the various image formats work, along with when you should use them.
GIF stands for Graphics Interchange Format. It is employs a “lossless” method of compression. Basically what it does is look for common sequences of information, then substitutes these sequences with a number. This is similar to how PKZip compresses a text document. PKZip looks for common words such as “the” and “because” and represents them with a number like 1 or 50. The only difference is that the .GIF file looks for “word-like’ patterns in the picture.
The number of word-like patterns in a .GIF file can be reduced when you restrict the number of color combinations within image. In other words, rather than have ten shades of blue, you have one. By reducing the color palette, you increase the number of common, word-like patterns. This means you increase the number of patterns that can be indexed. This means your image file gets smaller.
JPEG is an acronym for Joint Photographic Experts Group. JPG is a nice 3 letter version of the same. This file format employs a “lossy” compression format. What this means is that what you get on your browser is a close approximation of the original. This is done through Discrete Cosine Transformation which essentially cuts up your image into squares, then represents the data in those squares as a set of curves — essentially “re-mapping” the image. So as you increase the compression ratio for .JPG files, what you’re doing is increasing the size the “squares” that are transformed to curves — which is why highly optimized .JPGs look like some sort of impressionist rendering of the original.
Again, like GIF, reducing the number of colors in the color palette of your JPG file means that there is less data within each square that needs to be transformed into a curve.
So which to use and when? JPG is better suited towards photographs and other complex images in part because what is lost isn’t as noticeable to the naked eye, and because the brain does quite a bit of good work to guestimate what’s missing. GIF on the other hand is good for line art, such as graphics that contain text such as rollover buttons or simple logos.
PNG - Portable Network Graphics. The only problem with both JPG and GIF formats is that various companies own the patents to the technologies employed. Hence, there is a third format you need to consider, PNG, which is also a “lossless” format (similar to GIF), but also offers a variety of other benefits as described in the following article over at A List Apart entitled “Cross-Browser Variable Opacity with PNG“. Read it.
There are two tools I use to render all three image types. PhotoImact and Fireworks MX. There are also a wide variety of free or shareware products out there that can help you get the job done. Of course, no amount of color reduction is going to help you if you don’t also first physically reduce the size of your image. In other words, don’t be fooled into thinking that ‘resizing‘ the image with the height and width attributes of the <img> tag will make your images load faster. They won’t. They’ll only force your browser to try and compress my huge image as it comes from my server. So in a nutshell, when dealing with graphics on your web site:
- always color reduce, and physically reduce the size your images
- for text-based graphics and line art, use a .PNG file over .GIF, and a .GIF over a .JPG
- for photographs, I still prefer .JPG over .PNG and .PNG over .GIF
- remember that the height and width arguments of the <img> tag
only make the image appear smaller on screen, it does NOT change the
physical size of the image (meaning it takes just as long to load but
looks crappier).
Bottom-line? If you don’t understand anything of the above, at least understand this: download and use IrfanView to put your images on a diet. It’s free, it’s easy, and it’s not just a good suggestion, it’s the law!
