从神飞那里借了本《高性能网站建设进阶指南》，粗略读了一遍，最重要的收获是第10章图像优化纠正了我对256色的认识

Truecolor versus palette image formats

Using the RGB color model, how many distinct colors can you represent in a graphic? The answer is more than 16 million: 255 * 255 * 255 (or 224) gives you 16,777,216 combinations. Image formats that can represent this many colors are called truecolor image formats; examples are JPEG and the truecolor type of PNG.

To save space when storing the image information in a file, one technique is to create a list of all the unique colors found in the image. The list of colors is called a palette (also called an index). Having the list of colors, you can represent the image by keeping track of which palette entry corresponds to each pixel.

The palette can contain any RGB value, but the most common palette image formats GIF and PNG8—limit the number of palette entries to 256. This doesn’t mean you can pick from only 256 predefined colors. On the contrary, any of the 16+ million colors
are up for grabs, but you can only have up to 256 of them in a single image.

最后一段说GIF和PNG8最多只能包含256色，并不意味着只能从256种已定义好的颜色中选择，可以从224种颜色中挑选！

另外，本章还给出一些关于CSS Sprite的优化建议

Highly Optimized CSS Sprites

Sometimes optimizing sprites is more complex than optimizing images. Diverse resources combined in one sprite may be harder to compress well. Following these best practices will make your sprite as small as possible:

  • Combine like colors; for example, sprite icons with a similar color palette.
  • Avoid unnecessary whitespace, making images easier to process on mobile devices.
  • Arrange elements horizontally instead of vertically. The sprite will be slightly smaller.
  • Limit colors to stay within the 256-color limit of PNG8.
  • Optimize individual images, and then the sprite. Color reduction will be easier with a limited palette.
  • Reduce anti-aliased pixels via size and alignment. If an icon is slightly off-square, you can often reduce the anti-aliased pixels by aligning the image horizontally or vertically.
  • Avoid diagonal gradients, which cannot be tiled.
  • Avoid alpha transparency in Internet Explorer 6 or quarantine images that require true alpha transparency in a separate sprite.
  • Change the gradient color every two to three pixels, rather than every pixel.
  • Be careful with logos. They are very recognizable, so even small changes are likely to be noticed.