Heal Your Church WebSite


Teaching, rebuking, correcting & training in righteous web design.

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:

Sorry… but what does it mean to “color reduce” images? (I feel a bit stupid asking this, but I think it’s probably a good thing to learn… and more within my current capabilities than XML or API, whatever those are :-D )

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!

28 Comments

  1. Hey there, I just finished reading your blog and I’m very impressed with your explanation. Thank you.

  2. That was a pretty good explination of what color reduction is, but you didn’t say how to actually do it :)

  3. oh I have a question…
    I thought that some browsers (older evil NN4 type ones) had a problem with png files especially in stylesheeps. Is this just a scurilous (memo to self, don’t use words you can’t spell) rumour? Or is this true?

  4. Amen to “how to actually do it”, and an additional “emphasize what you’re saying”. The explanation that you provided provided a lot of detail, probably more than your recipient may have been interested in. Maybe more clearly deliniating the What, Why, and How parts, with a summary in each section would be helpful.

    What: color reduction, using fewer colors in an image
    Why: it makes your images smaller so they load faster
    How: In photoshop, use Image|adjust|posterize, and choose a number as small as you can get away with. (and still have a usable image)

    Related: compression formats; image quality setting, image size(pixels)

    (ps: please don’t be offended by any of this; I have a tendency to be overly critical sometimes)

  5. Thanks, Dean. That was very helpful! Um, Ian is right, I’m still not sure how to actually do it, though. :-)

    This is the first I’ve heard of .PNG files. What about .BMP files – what are those? Microsoft Paint only allows me to save as .BMP…

  6. BMP is a file format Microsoft threw together. I wouldn’t suggest using it for any web graphics, as the file sizes are generally pretty large. If you’d like another photo editor that will let you save files in other formats (and don’t have $700 lying around to buy Photoshop) then I would suggest downloading the GIMP @ http://www.gimp.org/~tml/gimp/win32/. It’s a free image editor that’s almost as good as Photoshop.

  7. Thanks, Ian! That helps lots! :-D

  8. When I start to download from the internet I receive the message “Could not finf the Color Space named ‘Cs6′ and ‘Cs9′
    Can you explain and tell me how to find these color spaces.

  9. I am having the same trouble and would like to know what to do. When I try to use Acrobat reader to download a calendar it says can’t find the ColorSpace named Cs6. Anyone have any idea what to do.

    Thanks,
    Dixie

  10. Could not find the Color Space named cs6 – also having this problem, ever since lease return pc put in place. What is the solution?

  11. Me too !!I’m also receiving that ” Could not find Color Space named Cs6 ” from Acrobat Reader followed by “This file contains information not understood by the viewer. Supress further errors ? ” followed by “yes” or “no” boxes to be checked. The end result is that the documents I am trying to read/print contain sections that are totally blacked out.(Charts, graphs and headings are the areas most normally blacked out.)Regular text not affected. Anybody know how to correct this problem ????

  12. Re the Color Space Cs6. Still not sure what causes it, but just downloaded Acrobat reader 6.0.(had been using 4.0) That solved all my problems.

  13. you have an old version of acrobat. uninstall all versions of acrobat reader. reboot. install acrobat 6.0 from acrobat.com

  14. Pingback: Joshua Claybourn's Domain

  15. I often see on my pc the box with this message: “file C:/COMMAND.COM is impossible to be found
    be sure that it exists and that its directory and name are right” ( I’ve tried to translate from Italian because I am Italian ).
    This usually make my internet connection end and some program close…it is so boring…can you help me?

  16. I often see on my pc the box with this message: “file C:/COMMAND.COM is impossible to be found
    be sure that it exists and that its directory and name are right” ( I’ve tried to translate from Italian because I am Italian ).
    This usually make my internet connection end and some program close…it is so boring…can you help me?

  17. I keep getting “can’t find colorspace CS6″ when trying to down load anything. I don’t know how to locate it in the least.

  18. I went to Moda Fabric to review their material. When I went to “What is new”, I got an error message that I needed Cs6 and AcroExch.

    Where can I get these for free, as I only want to view their site.

    Robert