|
|
|
Displaying Images
You can easily display images on your Web pages, provided you are linking to an image file that uses a supported format, such as GIF, JPEG, or PNG. GIF images display up to 256 colors. JPEG and PNG images display up to 24 million colors. PNG images can usually display the same image using a smaller file. However, PNG images are not supported by older browsers. Typically, simple images such as icons and bullets use a GIF format, while more complex images (such as photos) use JPEG or PNG format.
One of the key issues related to using images on a Web page is "load" time, or the time it takes a browser to download the images from a Web site. If you use many images, or large images, it will take longer for your page to load. If it takes too long to load, people will stop trying to view your page. This doesn't mean you shouldn't use images. In fact, images are a key element of Web page design. You should, however, carefully weigh the advantages and disadvantages of using images on your site.
To display an image on a page, use the <IMG> tag. At a minimum, the tag must identify the image you want to load, using the SRC attribute, as in <IMG SRC="images/misc/warning.gif">. Note that this image, which displays a warning icon, is in the subdirectory "image/misc/". Remember that, if the image you want to display is not in the same directory as your HTML document, you need to provide the location of the file.
In addition to SRC, the <IMG> tag has attributes that allow you to
- provide information about a graphics file
- specify the height and width (in pixels) that it will occupy on a page
- specify its alignment on the page
- specify whether it has a border (if it's used as an anchor, or link, to another file)
These attributes are:
| Attribute |
Definition and Values |
| ALT |
Information about the image, displayed when images are turned off in a browser. In older browsers, this information is displayed when the cursor is moved over the image. |
| TITLE |
In newer browsers, this information is displayed when the cursor is moved over the image. The ALT tag, in turn, will be displayed in nonvisual browsers or while an image is loading. Typically, titles provide more informative than ALT tags. |
| HEIGHT |
Specifies the height of an image, in pixels. |
| WIDTH |
Specifies the width of an image, in pixels. |
| HSPACE |
Specifies the space left clear to the right and left of an image, in pixels. |
| VSPACE |
Specifies the space left clear above and below an image, in pixels. |
| ALIGN |
Specifies the alignment of an image. Values include left, right, center, top, bottom, and middle. Additional values, including absbottom, absmiddle, baseline, and texttop, are recognized by various browsers. The default is ALIGN="LEFT". |
| BORDER |
Specifies whether a border is displayed if the image is used as an anchor (link). Attributes are 0 (no border), 1 or higher (specifies the thickness of the border). The default is BORDER="1". |
| ISMAP |
Specifies whether an image is used as a Server-Side Image Map – a graphical navigation device that allows parts of an image to serve as links to other files. Server-side Image Maps are run using scripts on the server, as opposed to Client-Side Image Maps, which are run solely by the browser. |
| USEMAP |
Specifies whether an image is used as a Client-Side Image Map (see ISMAP, above). |
| LONGDESC |
Specifies the location of a long description of the image, as a URL. The description can be used to describe the image in nonvisual browsers. |
Consider the following examples, which display the file warning.gif. I have displayed the relevant attributes in red:
| |
|
|
 |
<IMG SRC="images/misc/warning.gif"> |
|
<IMG SRC="images/misc/warning.gif" ALT="Warning"> Note: Move your mouse over the image to see the ALT text. |
|
<IMG SRC="images/misc/warning.gif" ALT="Warning" Title="Warning! Danger! Watchout! This is No Joke!"> Note: Move your mouse over the image to see the ALT text. |
| |
<IMG SRC="images/misc/warning.gif" ALT="Warning" ALIGN="RIGHT"> |
|
|
<IMG SRC="images/misc/warning.gif" ALT="Warning" ALIGN="LEFT"> |
|
<A HREF="warning.cfm"><IMG SRC="images/misc/warning.gif" ALT="Warning" ALIGN="LEFT" BORDER="1"></A> |
|
<A HREF="warning.cfm"><IMG SRC="images/misc/warning.gif" ALT="Warning" ALIGN="LEFT" BORDER="10"></A> |
|
<A HREF="warning.cfm"><IMG SRC="images/misc/warning.gif" ALT="Warning" ALIGN="LEFT" BORDER="0"></A> |
|
<IMG SRC="images/misc/warning.gif" ALT="Warning" ALIGN="LEFT" HEIGHT="25" WIDTH="25"> |
|
<IMG SRC="images/misc/warning.gif" ALT="Warning" ALIGN="LEFT" HEIGHT="75" WIDTH="50"> |
Note: Although you can use the HEIGHT and IMAGE attributes to display an image at a set height and width, doing so usually distorts the image. The best use of the HEIGHT and WIDTH attributes is to tell the browser the size of the image. Doing this allows the page to be laid out (and thus displayed) more quickly. I believe it is best to use the HEIGHT and WIDTH attributes with all images.
|
