The three formats best suited to the Web are JPEG, PNG, and GIF. These file formats can be handled by all the major browsers, with some restrictions in the case of Internet Explorer. These formats use compression algorithms to decrease the size of the file, which increases the page’s download speed. Even though high-speed Internet access is common, users who still have a slow connection will appreciate any attempt to minimize the size of image files.
Here we summarize the most important aspects of these three formats, and in Chapter 20, we go into much more detail.
The JPEG format is the best suited for photos due to its 24-bit color depth, which lets it render a large number of colors. JPEG is also good for rendering gradients, which are sometimes poorly rendered by the GIF format. The JPEG compression algorithm reduces the image size and results in a slight loss in detail and color. The loss is cumulative, so the more the image is compressed, the worse it looks.
When exporting a file to JPEG format, you can choose a quality level. The higher the quality, the larger the file. If you check SHOW PREVIEW IN IMAGE WINDOW, a preview of the image with that quality setting appears as a new layer. Under ADVANCED OPTIONS, OPTIMIZE lets you add additional compression. The expanded JPEG Export dialog is shown in Figure 8-27.
GIF is the oldest and the most limited file format. GIF can only represent up to 256 colors, so it’s best suited for simple images with few colors. GIF is commonly used (and well suited) for small animations like the ones described in Chapter 18.
One way to optimize an image in GIF format is to reduce the number of colors in the palette. Begin with 8 colors and then double this number until you’re happy with the result. If you get to 256 colors and are still not satisfied, try using a different format. Dithering, which can smooth the image, also increases its size.
PNG is, in theory, a versatile format, with 24-bit mode for photographs and 8-bit mode for images with fewer colors. In practice, the 24-bit mode results in files that are too large for the Web, so JPEG is a better choice. The 8-bit mode gives better results than GIF in terms of file size, but PNG is not well supported by Internet Explorer.
You can optimize an 8-bit PNG file using the methods described for GIF: Limit the colors and avoid dithering.
Transparency can be handy when you’re building a website because it allows you to place graphics of any shape against the background easily. But no file format handles transparency perfectly. The GIF format represents transparency with only 1 bit, so a pixel is either completely opaque or completely transparent. The PNG format can represent transparency using 1 to 8 bits. Although all modern browsers support 8-bit transparency in PNG, many people still use obsolete versions of Internet Explorer, which don’t support 8-bit transparency. The JPEG format can’t represent transparency at all.
If you want to use a round logo and you make the background transparent using 1 bit, the pixels along the edge of the circle will be either fully opaque or fully transparent, so the outline will look jagged and pixelated. If you fill the logo background with the web page’s background color and then smooth the edges, the edges will be a mix of the logo color and the background color, which looks better but makes changing the background color of the web page more difficult. If you use 8-bit transparency, the edge is smooth, and you can easily change the background color.
Figure 8-28 shows two logos on a web page. With this zooming factor, the difference is not very visible. Figure 8-29 and Figure 8-30 demonstrate the difference more clearly.
