- Working with Images
- Web Graphics Editors
- Adding Graphics Using the Image Element
- Image and Text Alignment
- Using Images as Links
- Image Maps
- What's Next
Adding Graphics Using the Image Element
The image element in XHTML is considered an inline element. This means that it can be contained within block elements such as paragraphs. It also means that the image will quite literally be rendered "in line," right where the tag is placed within the document. The minimal required syntax for the image element includes two attributes: src for the source URL of the image file, and alt for the alternative text used to describe the image:
<img src="myphoto.jpg" alt="A photo of the author" />
Practically, at least two additional attributes are needed: height and width. These attributes hold the vertical and horizontal measurements of the image, expressed in pixels. When present, these values allow the browser to "reserve" the space required for the image as it renders the rest of the page, which results in the images appearing to "fill in" after the text has been displayed. The end result is a page that gives the appearance of loading faster, which can result in fewer impatient visitors leaving your site before the content can be displayed.
The following example puts a single image inline within a paragraph, with the image space reserved using the height and width attributes (see Figure 3.1):
){kind=link}
<p><img src="fmb.jpg" height="200" width="300" alt="A view of the beach from the 10th floor landing of my hotel." /> I recently hosted two days of meetings at the DiamondHead Beach Resort in Fort Myers Beach, Florida. This is the view of the beach from the 10th floor landing of the hotel. Another day in paradise - just down the road from my home!</p>
Figure 3.1 Default inline presentation of an image within a paragraph.
Notice that the default presentation places the bottom of the image at the baseline of the text line in which it appears. This isn't the most visually pleasing result, but it is proper behavior when an alternative alignment isn't specified.
CAUTION
Avoid the temptation to "resize" an image by setting the height and width values lower than the actual measurements. Although most browsers will attempt to compress the image into the allotted space, the result is never as clean as an actual resampling using a graphics editor–and the user must still wait for the full image to download.