| When you import a graphic, the width and height of the image are shown in the Property inspector and placed into the code automatically; giving the browser the information it needs to define the layout of the page. This option can make a difference in the loading speed of your page. | | 1. | Select the yoga_sangha-title.jpg image and use the Property inspector to change the width in the W text field to 220 pixels and the height in the H text field to 40 pixels.
You need to press Return (Macintosh) or Enter (Windows), or click in the Document window to apply the change and refresh the view.
The new width and height attributes of the <img> (image) tag cause this graphic to appear in smaller dimensions without making the actual graphic file smaller. Notice that the file size of the selected image that is displayed in the Property inspector does not change. There are many important advantages of restricting all image adjustments to being performed within an image editor, including sharpness, image quality, and file size. If you were to reduce the same image in an image editor and reoptimize it for the Web, the file would be smaller in file size and higher in image quality.
 Note File size is an especially important consideration for Web pages. The smaller the file size, the more quickly your images load. And the more quickly your pages load, the more likely your visitors will wait around long enough to see your site. | 2. | Click one of the selection handlesthe black squareson the border of the selected image. Drag to resize the image and make it larger than the original size of the image.
The width and height specifications update automatically. Notice that the new dimensions are displayed in bold. This bold formatting is an indicator that the graphic has been resized. At times, you might resize a graphic accidentally, and the bold numbers will help clue you in to that change.
Tip Hold down the Shift key while you drag the image's lower-right corner selection handles to constrain the proportions of the image. Notice that when you scaled the image larger, the image quality diminished. Images display in browsers at screen resolution, which is 72 dpi. This resolution is not high enough to display an image at a size that is larger than the actual size of the graphicanother reason to always adjust the image size in your image-editing software (such as Macromedia Fireworks or Adobe Photoshop) to ensure that you have the smallest file size possible.
| 3. | In the Property inspector, click the Reset Image To Original Size button that is located just to the right of the W and H text fields.
|
The refresh icon indicates the Reset Image To Original Size button. It is in the center of lines connecting the W and H text fields. The refresh icon and connecting lines gives you another indication that the dimensions of the image have been alteredit appears only when the image dimensions have been modified. The image resets to the original size of the graphic. Notice that the width and height numbers revert to plain text, indicating that the image is set at the original size. Note When using very large images or images that are located on other servers, you can provide a visual clue to viewers by using a low source image. By defining a low source, you are choosing a lower-quality image that will appear first. The higher-quality image will appear in its place when the download is complete. When an image is selected, the Property inspector provides a Low Src text field for defining a low source image. Click the Browse For File Folder icon next to the field to choose an image. This technique is sometimes used when you know the final image will be large in file size and therefore take longer to download than a user might expect, or if the image is being obtained from a source that might experience frequent slow downs or lags. Low source images used in such situations often depict "loading" or similar messages.
|
