转自：http://www.cntesting.com/bbs/read.php?tid=1343&page=e#a
Coloring Your World
Robert Hess
Microsoft Corporation
July 10, 2000
Contents
Background Check
Graphic Formats
Applying Palettes
Image and color have had a long history on Web pages. But based on some of the questions that people send to me, as well as some of the results I see on far too many professionally designed Web pages, it seems to me that a lot of folks are still confused as to the technical aspects of how to use images and/or color on their pages. So, excuse me if the following is old news to some of you; I expect many people will find the following information useful.
Background Check
First, let me address what must be the simplest aspect of color usage, and possibly one of the most common problems present on many Web sites. When I say simple, I really mean simple. Here it is:
<body bgcolor="white">
Are you using this on your site? Are you sure? Take a moment to check your browser's default background color setting. If you are like the majority of computer users, you have your default background color set to white. Now, imagine what happens if—as you design Web pages—you constantly see them with a white background, even if you haven't specifically set the background to white. Now imagine that you add some graphics, or other page elements to your site. If you aren't intentionally checking to verify that these will still look fine on any background color, you should be sure to manually set your page's background color, because chances are that your carefully designed Web page won't look quite right if some color besides white comes in for the background.
<body>
</body> <body bgcolor="white">
</body>
Figure 1. The use of transparency in the lefthand image renders the accompanying text virtually unreadable. Also, the shadow around both the fly and the text looks jagged, because it was designed to be used on a white background. In the righthand image, the BGCOLOR attribute was explicitly set to white, so the image shows up as the designer intended.
I have my Web browser set to gray as the default background color, and you would be amazed by the number of sites I run across that weren't expecting to suddenly get a gray background. You would be equally surprised to see who owns some of these sites. Check it out. Change your default background color to something other than white, then browse the Web—starting with your own site.
Graphic Formats
Another fairly simple design issue, but one that I constantly see people struggling with, is the difference between .gif and .jpeg images. The specific issue is which format to use when you prepare images for your Web site.
The simple rule of thumb is that .jpeg images are best used for photographic (also known as "continuous tone") images, and the .gif format is best for images that have large areas of solid color. The reason for this lies in the process these formats use for their compression.
Figure 2. This 4K JPEG image would be 11K if saved as a GIF
Figure 3. This 2K GIF image would be 4K if saved as a JPEG
A .gif is a "lossless" compression model. This means that if you take an uncompressed bitmap image, compress it into a .gif file, then uncompress it back into a bitmap image, you will end up with the identical image. No bits are lost. However, if you were to convert this bitmap to a .jpeg, then bring it back to a bitmap, you would almost certainly lose data—and the tighter the compression, the more data you would lose. The algorithm that .gif uses for image compression works really well when you have a large area of a single color—but it will actually increase the size of the image if every pixel is a different color than the preceding one.
Figure 4. Zooming in on the above GIF image saved as a JPEG
Figure 5. Zooming in on the above GIF image
The only time you might need to use the .gif format for what otherwise might be best implemented as a .jpeg image is when you need transparency in your image. Graphic images are rectangular in form, but the .gif image format supports the notion of treating one of your image colors as trasparent, so that whatever image or color is underneath the image will show through. This is extremely handy for situations in which you want a non-rectangular image on your page. You can see this effect in the above "A Fly in the Ointment" example. The image of the fly and the shadowing are best done in a .jpeg image—but because I wanted to use transparency, I had to turn the image into a .gif.
Okay, there is one other time you would want to turn a .jpeg image into a .gif—when you want animation in your image. The .gif file format supports multiple images in a single file, and Web browsers have leveraged this to allow a .gif file to represent simple animation. However, I highly caution against using this too often.
Applying Palettes
When discussing the usage of .gif and .jpeg images, it is also important to touch upon the aspect of color palettes. A color palette is the definition of colors you will use for your image. The palette is placed and is then referenced by the appropriate color index within the image definition itself. This can allow the image data to be a lot smaller than it would be otherwise, but it also limits the numbers of colors you can use.
For example, let's pretend you had a 640x480 image that uses only 256 colors. If each pixel of the image is stored as a full, 24-bit color value (24 bits is the data storage required for a color value, such as "#99F5A2"), you end up with an image file that is about one megabyte in size. However, if you instead build a 256-entry color palette for each of those 24 bit colors— then, within your image file, use only 8-bit values (8 bits is the data storage required for an index value capable of referencing 256 different locations in a table) to indicate which of those 256 colors you want to use for your image, you end up with an image that is about one third the size. (Note that these calculations are on raw pixel images for discussion purposes only; an actual .gif or .jpeg image with these characteristics would be of considerably different size.)
Understanding the notion of palettes is important, because a .gif image uses palettes for its image definition, but .jpeg does not. This means that a .gif image can contain no more than 256 unique colors, while a .jpeg can contain virtually any color that can be described by a 24-bit value (more than 16 million colors). Most image-editing tools will allow you to customize/optimize the palette used by a .gif image, so that the colors in its palette will be those 256 colors that the image needs. A potential problem arises, however, when users set their display to 256-color mode. In that case, both the image and the display are using a color palette for showing images on the screen—and if an image wants to use a color that isn't contained in the screen's color palette, the nearest color from the screen's palette will be used instead.
While the palette the browser uses to display your image can't be controlled by the Web page being displayed, and, in fact, can't even be known by the Web page, it is possible to optimize a .gif image for display in a browser. You can do this by using a special browser-safe color palette. A long time ago, I wrote an article about this safety palette. Suffice it to say that by optimizing your images to use a specific set of 216 colors, you can exercise a fair amount of control over how your images will look in virtually any browser on any user's screen.
Figure 6. A black-and-white JPEG image that uses only 247 shades of gray
Figure 7. Dithering Mode: the same image, but dithered to use the Safety Palette
Figure 8. Nearest Color: the same image, but reduced to the nearest colors of the Safety Palette
In the example above, I've produced three black-and-white images of a Seattle ferry. The top image is a .jpeg, which will do a good job at reproducing the original black-and-white image. The image in the center is a .gif file to which I have applied the safety palette and a dithering algorithm to closely approximate the original image. If you are viewing this on a display set to 256-color mode, then both the top and center images will have the same grainy look to them. Otherwise, the topmost image will look fine and the center image will look grainy.
The image on the bottom is another .gif, in which I am exaggerating the problem by applying the safety palette and using a nearest-color algorithm. The result produces larger areas of color—true to the .gif format, but splotchy in this image. However, this .gif is smaller than the .jpeg on the top; the dithering of the center image causes it to be the largest of them all.
I've only scratched the surface of proper Web site use of images and color. I hope you have found something here that will help you design your Web sites just a little bit better.
１、把网页背景色明确的设定为：<body bgcolor="white">，可以预防那些重设了浏览背景色的少数分子；
２、jpeg格式适用于色彩层次丰富的，不需要透明化背景的；gif适用于色彩层次单一的，需要透明化背景的。
还有，我们系统文章中间不能带图片，这也是一个需要增强的地方。网页背景色这个问题也没注意，要改一下。
未看完，以后有时间再来读一下。
梦见我们网站颜色的基调变成了乳瓷蓝色，梦中的感觉很舒服，是不是有必要实践一下：）
也许，可以纳入新系统的设计与考虑。