HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [48]
BMP
The BMP format is Microsoft’s standard image format. Although it’s compressed sometimes, usually it isn’t. The BMP format creates very detailed images with little to no compression, and the file is often too large to use on the Web. Many Web browsers can handle BMP images, but you shouldn’t use them. Convert to one of the other formats, instead.
JPG/JPEG
The JPG format (also called JPEG) is a relatively old format designed by the Joint Photographic Experts Group. (Get it? JPEG!) It works by throwing away data that’s less important to human perception. Every time you save an image in the JPG format, you lose a little information. This sounds terrible, but it really isn’t. The same image that came up as 13MB in its raw format is squeezed down to 1.5MB when stored as a JPG. Most people can’t tell the difference between the compressed and non-compressed version of the image by looking at them.
The JPG algorithm focuses on the parts of the image that are important to perception (brightness and contrast, for example) and throws away data that isn’t as important. (Actually, much of the color data is thrown away, but the colors are re-created in an elaborate optical illusion.)
JPG works best on photographic-style images with a lot of color and detail. Many digital cameras save images directly as JPGs.
One part of the JPG process allows you to determine the amount of compression. When you save an image as a JPG, you can often determine the quality on a scale between accuracy and compression.
The JPG compression scheme causes some particular problems with text. JPG is not good at preserving sharp areas of high contrast (such as letters on a background). JPG is not the best format for banner images or other images with text on them. Use GIF or PNG instead.
Even if you choose 100 percent accuracy, the file is still greatly compressed. The adjustable compression operates only on a small part of the process. Compressing the file too much can cause visible square shadows, or artifacts. Experiment with your images to see how much compression they can take and still look like the original.
Keep a high-quality original around when you’re making JPG versions of an image because each copy loses some detail. If you make a JPG from a JPG that came from another JPG, the loss of detail starts to add up, and the picture loses some visual quality.
GIF
The GIF format was developed originally for CompuServe, way before the Web was invented. This format was a breakthrough in its time and still has some great characteristics.
GIF is a lossless algorithm so, potentially, no data is lost when converting an image to GIF (compare that to the lossy JPG format). GIF does its magic with a color palette trick and a run-length encoding trick.
The color palette works like a paint-by-number set where an image has a series of numbers printed on it, and each of the paint colors has a corresponding number. What happens in a GIF image is similar. GIF images have a list of 256 colors, automatically chosen from the image. Each of the colors is given a number. A raw (uncompressed) image requires 3 bytes of information for each pixel (1 each to determine the amount of red, green, and blue). In a GIF image, all that information is stored one time in the color palette. The image itself contains a bunch of references to the color palette.
For example, if blue is stored as color 1 in the palette, a strip of blue might look like this:
1, 1, 1, 1, 1, 1, 1, 1, 1, 1
GIF uses its other trick — run-length encoding — when it sees a list of identical colors. Rather than store the above value as 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, the GIF format can specify a list of 10 ones. That’s the general idea of run-length encoding. The ship image in this example weighs 2.92MB as a full-size GIF image.
The GIF format works best for images with a relatively small number of colors and large areas of the same color.