Special Concerns

Several considerations regarding graphic file formats should be discussed before moving on to other aspects of Web page creation. These include using low-resolution (lo-res) images, splitting large images into several smaller ones, and working with optimization tools.

Using Lo-Res Images

As an alternative to progressive rendering, consider the lo-res approach. FrontPage supports, in the Picture File Type dialog box, a lo-res alternative to any image. This lo-res alternative loads before the actual image loads. If you can create a compressed or black-and-white version of the actual image, visitors will have something akin to the image to look at while the actual image is downloaded.

FrontPage can help create a lo-res alternative. With the image selected, click the Black and White tool in the Picture toolbar. This creates a black-and-white version of the image. Save this version with a name that is unique, and include this name in the Lo-Res Alternatives field of the Picture Properties dialog box.

Slicing Images

Another trick for managing large images that are slow to download is to slice it, cut the large image into several smaller ones. As the page loads, these pieces will download and become visible before the entire image does.

This technique gives visitors a quick look at portions of the image without the blurry blotches that are common with progressively rendered images.

When using this technique, you should place the cut-up images within a table so that they won't wrap if the browser window is reduced. Be sure to set the borders, cell padding, and cell spacing properties to 0 in the Table Properties dialog box.

If you are having a hard time putting the pieces of a sliced image back together, see "Putting the Slices Back Together?" in the "Troubleshooting" section at the end of this chapter.

Optimization Tools

The optimization tools in FrontPage are limited, so you might need to rely on additional tools to complete your optimizations. For example, Adobe's graphical tools have adopted a common interface for optimizing graphics for the Web. Whether you're using Photoshop, Illustrator, or InDesign, the Save for Web dialog box will let you visually check the various optimization options.

Several good tools to assist you with image optimization are as follows:

• ImageReady This tool is part of PhotoShop and is available from http://photoshop.frontpagelink.com/. It has quickly become the industry standard for image optimization tools.

• Debabelizer Pro This is available from http://debabelizer.frontpagelink.com/. It's the professional-level graphic production tool. It manages the optimization process and includes a batch processing utility that lets you optimize many graphics at once. This is a particularly good choice for Web graphic designers, but it's an expensive program.

• Ulead Systems SmartSaver Pro This is available from http://ulead.frontpagelink.com/. For the Windows platform only, this helpful utility enables you to import and then compare graphic optimization types and weights before saving.

• GIF Optimizer This is available from http://gifoptimizer.frontpagelink.com/. You can optimize your GIFs online using this tool, free of charge.