ell-used graphic images make a site more interesting, add information, and help with navigation. With a little forethought, you can use images that download quickly, display quickly, look good, and add value to your site. On the flip side, too many images used badly can also make your site a big, unwieldy bandwidth pig. You add images with the image tag. The image tag tells the browser to display a specific image at this point in the page.
<img src="filename.gif" align=left/right width=XXX height=XXX alt="text">
Using the Image Tag
<img src="filename.gif" align=left/right width=XXX height=XXX border=XX alt="text"> |
You add images with the image tag. The image tag tells the browser to display a specific image at this point in the page.
The location of the image is described by its URL. For example, this code tells the browser to insert an image called "earth.gif" into the file. The other attributes in the image tag describe how to place the image on the page and describe what text to display if the image doesn't load or the reader has turned off images in the browser. The image tag is highlighted in color to make it stand out:
<img src="http://projectcool.com/images/earth.gif" align=left width=50 height=50 alt="world logo">Hello World!<br>
How Are You?
The example displays like this in a Web browser:
Hello World!
How Are You?
Image Tag Attributes
The image tag has six often-used attributes:
- src. Source. This is the location and name of the image you are using. As with anchors and links, use the full URL if the image is on another server. Use relative URLs if it is within your own site. Remember that the URL must begin and end with quotes.
- align. Alignment. You can align the image to the right or left side of the page. You cannot center it. (If you want to center it try this trick: put the image between start and end center-aligned paragraph tags.)
- width. Width of the image in pixels.
- height. Height of the image in pixels.
- border. Thickness of the border. in pixels, around the image. Use the border command only when the image is also the anchor for a link.
- alt. Alternate text. This is the text that appears in a reader's browser if the reader has his or her image loading turned off or if the browser doesn't display graphics. You should always include some brief alternate text. Remember that the text must be surrounded with quotation marks.
The Importance of Width and Height
Do you need to include the width and height of your images in the image tag? No, technically you don't -- but you should. Specifying image width and height lets the browser layout the page and begin displaying the text while it is still downloading the image. The reader can start using the page immediately instead of waiting for all the images. This increases perceived speed and makes your readers feel like your site is fast.
Specify image size in pixels. You can use your graphics program to see the size of the image in pixels. Additionally, some editing programs, such as BBEdit, will automatically measure your image and insert the height and width in the tag.
Save the image file at the exact size you want to use it in your page. Although most browsers will scale the image if the image file and your specified size are different, rescaling consumes computer processing time. Picture the poor reader out there with an older PC and too-little RAM watching the computer go chug-a-chug-a-chug-a as your image rescales on his or her screen. It is not a pretty sight.
