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.
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.