![]() ![]() ![]() |
Images are wonderful visual tools, but unfortunately, they're sometimes responsible for long download times on the Web. This section describes how to add image files to your Web pages and points to some resources describing strategies for making your Web graphics as efficient as possible.
You add graphics to Web pages using the IMG tag, which specifies the file location of the image file.
<IMG SRC="images/bridge.jpg" WIDTH=200 HEIGHT=200 ALT="Brooklyn Bridge" BORDER=0>
For a full description of the IMG tag and its associated attributes, properties, methods and events see the HTML Reference in the Help Resources pane.
HomeSite supports GIF and JPEG, the most common Web graphics formats. It also supports BMP and PNG formats, but note that these formats are not supported by all browsers.
There are several ways to add images to Web documents in HomeSite:
For graphics files that you use often, such as navigation bars or icons, use Snippets to store and retrieve commonly used code.
The WIDTH and HEIGHT attributes are calculated automatically, and the IMG tag appears in your document.
<IMG SRC="images/star.jpg" WIDTH=24 HEIGHT=24 ALT="" BORDER="0">
Or, click in the IMG tag and choose Edit Tag from the context menu to open the Image dialog box.
For example, you can add ALT text that describes the image and appears when the image is unavailable or if users access the page with graphics turned off.
If the size of the image changes after you insert the tag, use the Recalc Size button in the Image dialog box to recalculate the WIDTH and HEIGHT values.
To add a background image for the whole document, you use the BACKGROUND attribute of the document's BODY tag.
Netscape Navigator supports an HTML extension called low source that displays a low resolution image while a document loads, overlaying it with the final image.
Web graphics appear inline with surrounding text. To control the way images align with text and other objects on the page, use the ALIGN attribute. You can force the image to sit at the bottom, middle, or top of the current line of text. Also, you can float the image to the left or right of surrounding text blocks.
For detailed information on how the ALIGN attribute works, see the HTML Reference in the Help Resources pane.
When you're working with many graphics files, it's helpful to be able to identify them visually. In HomeSite, you can get a thumbnail view of all images in the current directory by clicking the Thumbnails button on the Tools toolbar. The thumbnail images appear in the Results window at the bottom of the HomeSite work space.
When you're looking at thumbnails, use the right mouse button to open the context menu, which lets you view the thumbnail image in full-size in a browser window or to see the image file properties. In Edit or Design view, you can also add images to your document by dragging and dropping a thumbnail image.
If you're working with a long list of text and graphics files, you can right click in the file list and choose Filter to view only the image files in the current directory.
Web designers have discovered some helpful strategies for improving page display and reducing graphics file sizes on the Web. For example, including measurements for the WIDTH and HEIGHT attributes makes the page display easier for the browser to load, making the page load more quickly and efficiently.
In HomeSite, you can check to see how big your Web document is by choosing Tools > Document Weight. The Document Weight dialog box shows an estimate of how long the page will take to download in a user's browser.
The most important step in optimizing graphics for Web display occurs in your graphics editing package -- such as PhotoShop or PaintShop Pro -- when you optimize image files. Among the most helpful resources about creating efficient Web graphics are these books and Web sites:
![]() ![]() ![]() |
AllaireDoc@allaire.com
Copyright © 1998, Allaire Corporation. All rights reserved.