Resizing Images

When editing images for use in a Web site, one of the most common tasks is resizing them so that they will download more quickly. You can get fair results using FrontPage's built-in image editing capabilities, however, FrontPage is not always the best choice for this procedure.

File size is one of the most important considerations when saving images for use on the Web. Large file sizes mean long download times, and long download times mean fewer site visitors. Paying careful attention to image optimization is the key to keeping image sizes small.

FrontPage's built-in tools don't offer a lot of control over how an image is saved. You can choose the file format and the amount of image compression used. However, if you're really going to optimize your images as they should be, FrontPage just doesn't provide the necessary tools.

For more information on the options available when saving graphic files in FrontPage, see "Inserting Graphics Files," p. 117.

Import the farmpond.jpg file (from your CD) in to a FrontPage Web site and insert it onto a page. The first thing you will notice about this file (see Figure 47.8) is that it is large. You wouldn't want to use this file on a Web page because it would take more than 1.5 minutes to download over a 56K modem connection.

Figure 47.8. The farmpond.jpg image after being inserted into a Web page. The image definitely needs to be resized.

TIP

Even though the images you are using from the CD are in JPEG format, when editing images for your Web site, you should not use JPEG images. JPEG is a lossy format, which means that most editing on them causes a loss in quality that can never be retrieved. The more times the image is edited, the poorer the quality gets.

You should always save original copies of your images in a lossless format such as BMP or better yet the original file format of your graphics application.

To resize the image, open it in your image editing program by double-clicking it in the folder list in FrontPage, or by right-clicking it and selecting Open With and the application you would like to use to open it.

Figure 47.9 shows the Image Size dialog box in Adobe ImageReady. Notice that the Quality dropdown is set to Smooth (Bicubic).

Figure 47.9. Adobe ImageReady's Image Size dialog box.

TIP

Bicubic resizing is your best choice if you are making an image smaller. However, if you are increasing the size of the image, bicupic resampling will often cause unwanted blurring. You should experiment to find the best results for the image you are resizing.

When you choose the Resample Picture to Match Size option on FrontPage's Picture Actions menu, FrontPage uses bicupic resampling to increase the quality of the image.

Figure 47.10 shows PhotoImpact's Image Size dialog box. PhotoImpact offers the same basic functions as ImageReady, but it adds some nice features, such as a preview that can be set to specific screen sizes so that you can see the relative size of the image when compared with common screen resolutions. In Figure 47.10, the farmpond.jpg image has been resized, and the preview shows its relative size to a 640x480 monitor resolution.

Figure 47.10. PhotoImpact's Image Size dialog box. The screen size setting in the Preview window is very convenient for Web developers.

After you've resized your image, you will need to save the image back into your FrontPage Web site. In most cases, you can simply save the image in your image editing application and it will save your change directly into the Web site. However, if you need to, you can also save the image into the physical directory (that is, c:\inetpub\wwwroot\mywebsite) where your Web site resides. If your change is not visible in FrontPage after saving the image, refresh the page or close and reopen the page.

Figure 47.11 shows the farmpond.jpg image after being resized. Note that the download time is now 4 seconds over a 56K connection. That's quite an improvement.

Figure 47.11. The farmpond.jpg image after being resized to a more suitable size.

If you don't see your changes in FrontPage after saving your image, see "Changes Not Visible in FrontPage" in the "Troubleshooting" section of this chapter.