Color Palette and graphic optimization

Better face it: you can't use all the colors you want to in a web site! You just can't do it! There are a set number of colors that you can use, called “web safe colors” and they are pretty specific. To make it more fun, there's no real standard to those colors either, so calling a color “safe” does not really mean that it's 100% safe! In web design, you learn to live with such contradictions.

This goes right into optimizing graphics for the Internet. There are 2 main types of images you'll see on the world wide web: JPEGs and GIFs.

JPEGs are best for photographs. They take all the little pixels that make up the picture and save them in a small file format. It messes up the image somewhat, but it's tolerable. GIFs are practically useless for photographs, but are excellent for simple buttons and tiny images like bullet points, shopping carts and so forth. They use what is called “Indexed Color” because when you save them, they will pull together a palette of a few web safe colors that are the best set of colors just for them. If your image is black and white, the GIF will just use 2 colors. That makes them much smaller.

Optimizing graphics falls into 2 main categories. First, you need to make each image take up as little data as possible. Use JPEGs and GIFs to do that, as mentioned above. Second, slice larger images up into tiny pieces. You'll see long headers on web sites pop in a little piece at a time sometimes because the web designer used a bunch of little slivers to put together a complete image. They load up faster than trying to load up the entire image all at once. Counter-intuitive? Welcome to web development!

For dealing with graphics, use Adobe PhotoShop, Macromedia Fireworks, GIMP, or Paint Shop Pro.

StepRock Media Uses Pro software:

• Macromedia DreamWeaver
• Adobe PhotoShop
• Adobe InDesign