Inside Technique : Back to Basics with Images : The Image Tag

The easiest way to create an image on your web page is to simply add the IMG element and specify the location of the image using the SRC attribute:

<IMG SRC="images/insided.gif">

While the above correctly displays the image, it also halts the rendering of your page in most browsers except Internet Explorer 4 and 5 until the size of the image is known. While Internet Explorer 4 and 5 do not stop rendering to wait for the size, the page will automatically rerender to accomodate the image once the size of the image is known.

To avoid this issue and improve your page's performance you should always specify a width and height on the image. This allows the browser to allocate the necessary space for the image. While waiting for the image, a placeholder for the image is created and the page continues to render. When the image is downloaded it automatically replaces the placeholder:

<IMG SRC="images/insided.gif" WIDTH=100 HEIGHT=200>

Describing the Image

The ALT attribute is as important as specifying the width and height. By describing the image in the ALT attribute, your page is accessible by visitors who can't see images or who may have them disabled.

In addition, HTML 4.0 defines a TITLE attribute for your image. This attribute is related to the ALT attribute and is displayed when the mouse hovers over the element. Currently only Internet Explorer 4.0 supports the TITLE attribute. Most existing browsers also treat the ALT text similarly to the TITLE attribute and displays the ALT text when the mouse hovers over the element. When both attributes are specified, the TITLE takes precedance and is displayed.

For legacy browsers, we highly recommend you specify at least the ALT attribute, and highly consider also providing an image title with the TITLE attribute:

<IMG SRC="images/insided.gif" 
     WIDTH=100 HEIGHT=200 
     ALT="The front cover for Scott Isaacs' book, Inside Dynamic HTML"
     TITLE="The Book, Inside Dynamic HTML"
>

Adding space around the image

In addition to defining a width and height, you can optionally control the space between the image and the surrounding text. This space is similar to adding a horizontal and vertical margin around the image. HTML provides two attributes for defining this space: hspace and vspace. These attributes take pixel values like the width and height attribute. For example, to add a 5 pixel buffer between the image and text:

<IMG SRC="images/insided.gif" 
     WIDTH=100 HEIGHT=200 
     HSPACE=5 VSPACE=5
     ALT="Book cover for Scott Isaacs' book, Inside Dynamic HTML">

Suppressing the Image Placeholder Icon

Most browsers display an icon in the placeholder as they are downloading images. Netscape added a proprietary attribute to Netscape Navigator 4.0 and later, SUPRESS, for turning off the icon representing the placeholder. You can use this to give your page a cleaner look. However, when using this attribute, keep in mind that it is a Netscape proprietary extension to the language and that it is not part of the HTML recommendation:

<A HREF="/dhtml/insidedhtml.asp">
  <IMG SUPRESS 
       BORDER=0 
       SRC="images/insided.gif" 
       WIDTH=100 HEIGHT=200 
       ALT="Book cover for Scott Isaacs' book, Inside Dynamic HTML">
</A>

The Netscape SUPPRESS attribute has no effect on Internet Explorer or older browsers. Internet Explorer 5.0 provides similar functionality through an user option. Users have the option of displaying the image placeholder. By default the placeholder is disabled.

Next we continue with a brief introduction on how to turn your image into a link. Links are used to navigate the user to a new page.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.