Graphic Optimization

Optimizing graphics is the technique by which a Web graphic designer reduces a graphic's file size for acceptable download times while maintaining a high-quality image.

Optimization is all about reducing an image's file size. The file size can be reduced by getting rid of graphical information preferably, the unnecessary information, such as extra whitespace that surrounds an image. One way to reduce file sizes is to reduce image size; with fewer pixels, less information exists and the file is smaller.

Before optimizing any image, you must determine which file format is appropriate for the image. This will impact your optimization strategy. To recap: The general rule of thumb is to use the GIF file format for line art and images with mostly areas of flat color. JPEGs are more appropriate for full-color, gradient images; PNG is useful if you have an image with more than 256 colors and you're certain that the people accessing the image are using a browser that supports PNG graphics.

CAUTION

Interestingly, the guidelines discussed within this chapter for these formats are not always accurate for every possible situation. Often, determining which format that will help you achieve the smallest file size while retaining the most important information takes a little experimentation and a good dose of trial and error.

Use these guidelines as guidelines only and double test all of your graphic file options.

Optimizing a GIF Image

Several additional ways to optimize GIF images are available. One of these is to throw away colors that aren't being used. A GIF image holds the information for 256 colors, but if an image uses only 56 colors, the extra 200 colors are unnecessary information that can be deleted. You will need a software package such as ImageReady, the image optimization tool that comes with Photoshop, to eliminate the extra colors.

Another optimization method for GIF images is to replace large sections of multiple colors (such as dithered areas) with a single color; the resulting image saved using the GIF format will be much smaller.

Optimizing a JPEG Image

JPEG optimization is easier to control. The capability to optimize an image is one of the key benefits of the JPEG format. Because the JPEG format is a lossy format, it automatically throws away image information based on the user-specified settings. It first throws away the information that no one will miss; but eventually, if you squeeze hard enough, it will discard some noticeable information.

You can use FrontPage to control the level of JPEG compression using the Picture File Type dialog box. This dialog box becomes available when you save a Web page containing graphics. The section "Additional Graphic Techniques," later in this chapter, shows how to use this dialog box. Here's a list of helpful optimization guidelines for the JPEG format:

• Images appropriate to optimization as JPEG files should have many colors, light sources, or color gradients.

• Your initial file should be saved using the maximum quality JPEG setting with no compression.

• The file to be optimized should be appropriately sized for Web use.

NOTE

Quality settings of 75 and 50 are often similar in visual quality but not always similar in terms of weight. Most of your JPEGs will be saved at a setting of 50, with some at 75, and if you truly are looking to keep image integrity very few will be saved at 25 or lower. A setting of 100 is a good setting should you have a reason to want full color with absolutely no degradation.

The more you practice optimization techniques, the more skilled you will become at knowing which type of file format to use, how much or how little to optimize a graphic, and when your specific circumstances allow you leeway for variation in file weight.