In general, a best practice is to prepare images in an image editor, such as Microsoft Expression Design, or whatever image editor you’re partial to, before importing them into your site. The operations you’d do in the image editor would include adjustment of physical size, color adjustment, text overlay, and a host of other techniques, depending on the intended use of the image.
Although Expression Web isn’t intended to be used as your image editor, it does contain a number of tools you can use to make quick adjustments. Any professional will have his or her preferred graphics tool for a given job, but the ability to make an adjustment to an image while creating a new layout or in the course of maintaining an existing site is a timesaving feature.
In this exercise, you will edit an image within Expression Web.
Note
USE the CH5 sample site you modified in the previous exercise.
OPEN the CH5 site if it isn’t already open.
On the default page, right-click the Pager image you inserted in the previous exercise, and then click Show Pictures Toolbar. Point to each button on the Pictures toolbar to view its tooltip.
On the Pictures toolbar, click Crop. Then drag the handles of the cropping box over the image to define the area of the image you want to keep.
Press
to crop the graphic. Then on the toolbar, click Save. In the Save Embedded Files dialog box, click Rename, and then change the image name to PagerCrop.jpg (to preserve the original image).In the Save Embedded Files dialog box, click OK.
Double-click the image to open the Picture Properties dialog box, and then click Edit.
The image opens in a Microsoft Paint window.
Click the Text button, and draw a text box at the bottom of the image. In the text box, type Emergency Service.
Save the picture as PagerCropText.jpg, and then close Paint.
On the default page, double-click the image to open the Picture Properties dialog box, and then click Browse. Navigate to the site’s images folder, click the PagerCropText image, and click Open. Click OK to close the Picture Properties dialog box, and then save the page.
Click the bottom of the text paragraph in the content editable region, and then press
to insert a new paragraph.Insert the TestTubes image that you imported into the site earlier in this exercise.
Double-click the image to show the Picture Properties dialog box, and then click Picture File Type.
In the Picture File Type dialog box, you can choose different file types: JPEG, GIF, and PNG. You can also change the image compression.
Clear the Use image as is check box, and change the Quality level to 60.
The image file size has been reduced significantly. You can also set the number of Progressive Passes for the image in the box below the Quality box, but this is generally only needed for purposely high file–size images such as high-quality artwork samples.
Click OK in the Picture File Type dialog box, and then click OK in the Picture Properties dialog box. Save the page and accept the default settings on the Save Embedded Files dialog box.
Important
Be careful when compressing images, whether through the facilities in Expression Web or another image editor. As you compress them, the file size will get lower along with the quality. For optimum image compression, you’re looking for a balance between file size reduction and acceptable appearance.
