Image Basics

[ LiB ]

Images are not complicated to use in the browser, but like everything, they have their rules and quirks ; the more you know about those the better. This section covers the basics: how images work in web pages and how they fit into the world of Dreamweaver.

Images in the Browser

Images generally are inserted into web pages using the img tag, like this:

 <img src="fido.gif" width="100" height="100">

The code tells the browser where to look for the image file that should be displayed in this space and how big a space to leave. The src attribute is a relative or absolute link to a GIF, JPEG, or PNG file. It's a required attribute because, without it, there is no image! Strictly speaking, neither width nor height is required, but if they're omitted, the browser has no way of knowing how much space to leave for the image, which slows its display of the web page. So these attributes are almost always present. Table 5.1 lists these and other commonly used attributes for the img tag.

Table 5.1. Commonly Assigned Attributes of the img Tag

Attribute Name	Description	Required?	Values
`name id`	Used for identification	N	Text string
`src`	The file containing the image	Y	URL
`width height`	Dimensions of the image	N	Number of pixels
`alt`	Text to display or read if the image can't be viewed	N	Text string
`border`	Width of the border surrounding the image	N	Number of pixels
`vspace hspace`	Vertical/horizontal padding on either side of the image	N	Number of pixels
`lowsrc`	Alternate image to display while the main image is loading	N	URL
`align`	Determines how the image aligns with other elements in the same block	N	Top, left, right, center, and so on
`usemap`	Associates the image with an image map	N	Name of image map

The image files themselves must be in a format that the browser recognizes and is capable of displaying. Currently, those formats are GIF, JPEG, and PNG (though browser support for PNGs is spotty at best, and most web designers stay away from them). The GIF format is best suited for nonphotographic images with limited colors where crispness is required. GIFs can also contain animation and transparency effects. The JPEG format is best suited for photographs and other images containing many colors or subtle color shifts.

Images in Dreamweaver

Dreamweaver makes it easy to work with imagesso easy, in fact, that you may be in danger of losing sight of what's really going on behind the scenes. The following sections go over the basic procedures for working with images in Dreamweaver, pointing out a few potential pitfalls along the way.

Inserting Images

You can get images into Dreamweaver in a variety of ways. You can insert them using the Image object in the Inset bar or the Insert > Image command (see Figure 5.1). If you have a site defined, you can also drag and drop images from the Site or Assets panel into the Document window. Remember that when you insert the image, Dreamweaver doesn't actually embed it in the page like a table or list; it inserts the document- or root-relative path to the image file. Especially if you're using document-relative paths, Dreamweaver works best if you have saved your file before inserting the image so that it can calculate the relative path between the document and image file.

Figure 5.1. Inserting an image using the Image object.

For more on the Assets panel, see the section "Managing Site Assets" in Chapter 18, "Site Publishing and Maintenance." For more on document-relative, root-relative, and absolute paths, see the section "The Basics of Links" in Chapter 6, "Links and Navigation."

Working with Images

Most image properties can be set in Dreamweaver by using the Image Property Inspector (see Figure 5.2). For setting all other properties, use the Selection Inspector or the Edit Tag command.

Figure 5.2. The Image Property Inspector.

Resizing Images

Images can be resized by changing their width and height values in the Property Inspector or by dragging their selection handles in the Document window. Remember, though, that it's best not to resize images in Dreamweaver or anywhere outside your graphics-editing program. Resizing an image in HTML just tells the browser to display it larger or smaller than it really is. Displaying it larger than it should be enlarges the pixels, distorting the image and making it look pixelated and fuzzy. Displaying it smaller makes the pixels smaller than can be displayed in the browser, so you're just wasting pixels and bandwidth.

You can always tell if an image has been resized in Dreamweaver by selecting it and checking the Property Inspector. If the width and height fields show their values in bold, those are not the original dimensions of the image. You can restore the image to its proper dimensions by clicking the Reset Size button in the Property Inspector, or by clicking the W and H next to the width and height fields.

However, as with all rules, there are a few exceptions. GIF images made from solid colors or stripes can be stretched without distortion, as long as the stretch occurs along the length of any stripes . This increases image size without increasing file size and is good for bandwidth efficiency.

Aligning Images

Setting image alignment with the Property Inspector can be confusing for the uninformed because the inspector contains two sets of alignment commands: the Align drop-down menu and the left/center/right alignment buttons (see Figure 5.2). What's the difference?

The Align drop-down menu adds an alignment attribute to the img tag itself, like this:

 <img src="fido.gif" width="100" height="100" align="left">

Refer to Table 5.1, and you'll see that this attribute determines how the image aligns with other items in its block. Most commonly, this is text surrounding the image. Setting this attribute is similar in many ways to setting a text wrap or runaround option in page-layout programs.

The left/center/right alignment buttons are for text alignment. If a text element, such as a p tag, surrounds the image, clicking one of these buttons adds an align attribute to that element. If no text element is present, clicking one of these buttons adds a div tag and adds the alignment to that, like this:

 <div align="left">   <img src="fido.gif" width="100" height="100"> </div>

If the image is inside a table cell, a more efficient way to control its alignment within the cell is to add an alignment attribute to the table cell. This is done a different way, by selecting the table cell (clicking outside the image but inside the cell to create an insertion point will do) and using the Horiz and Vert drop-down menus to set the cell's align and valign properties. The code looks like this:

 <td align="left" valign="middle">   <img src="fido.gif" width="100" height="100"> </td>

Editing Images

Double-clicking any image in the Document window opens a dialog box where you can change the src file for the image. Selecting the image and, in the Property Inspector, clicking the Edit button launches a web graphics application and opens the image for editing in that application. What graphics program launches? That depends on your which external graphics editor you have defined in Dreamweaver. To check (or change) that setting, do this:

Choose Edit > Preferences to open the Preferences dialog box, and go to the File Types/Editors category (see Figure 5.3).

Figure 5.3. Setting the preference for the external graphics editor.
In the Extensions list, choose GIF. What appears in the Editors area as the primary editor? If the graphics program that you want to use isn't listed, click the + button at the top of this list to add a program. Select your favorite program and click the Make Primary button.
Repeat this procedure for JPEG and (if you'll be using PNGs) PNG.
When you're done, click OK to close the dialog box. The next time you click the Edit button in the Image Property Inspector, whatever program you defined as primary for the type of image you have selected will launch.

To enable Dreamweaver/Fireworks integration, Fireworks must be defined as the primary graphics editor for GIFs and JPGs . See the section "Dreamweaver/Fireworks Integration" later in this chapter for more on this.