Search this book | Previous | Table of contents | Next

Incorporating graphics with the image tag

This section describes how to incorporate images into your HTML.

Next to the ability to create hypertext links, the ability to incorporate graphics into documents has helped make the World Wide Web so popular.

The first thing you need before you can put images into our HTML documents are the images themselves. There are a few things you need to keep in mind about these images. First, use them only when necessary. Ask yourself whether or not the images add value to our document. If they don't, then consider doing without them. Too many people have relatively slow modem access to the Internet. The time they spend downloading your images better be worth it to them or they will not continue to read your documents.

Second, when you do incorporate images into your documents, keep them small. Keep them small in terms of screen size; do not create images that are larger than most people's monitors (approximately 600 x 480 pixels). The files should be small in terms of their file size as well. Images larger than 30 or 40 kilobytes start to get too big. Additionally, your images, especially if they are intended for on-screen viewing only, do not need to have high dots-per-inch (dpi) ratios. Seventy-two (72) dpi is usually a more than satisfactory resolution. You can reduce the size of your images by reducing the number of colors the image contains. Consider using no more than 256 colors or shades of gray.

Third, there are a wide variety of image formats you can save your graphics in, but the graphics interchange format (GIF) is the format understood by all graphical WWW browsers. Save or convert your files into GIF files. Furthermore, to make your images more attractive, consider using a utility like clip2gif or Transparency to make your images transparent. (See the section on graphic utilities for more information about this process.) Also consider saving your images using the GIF "interlaced" option. This produces a "Venetian blind" effect when the image is rendered and gives the reader an idea of the image's shape and content even though the entire image has not been received yet.

Basic IMG tag

After you have created your images, you are ready to insert image tags into our HTML document. The image tag has the following basic form:
<IMG SRC="url-to-images.gif">
The IMG denotes this tag as an image, and the SRC is a full or relative URL to the image file. Here is a real world example:

This images was generated with this HTML code:

<IMG SRC="../graphics/flowers-for-html.gif">
A not-so-obvious limitation of the image tag is that it, by default, always left justifies your image. More specifically, browsers always renders the image just to the right of the previous character. Consequently, if you put your images within paragraphs, then you might get slightly unpredictable results.

Adding alignment

As demonstrated above, you can insert images into your documents. Unfortunately, you can not wrap any text around your images using these tags. Enhanced Netscape tags do allow you to do this, but the "standard" HTML codes do not. The closest thing you can get to wrapping text is through the use of the ALIGN element of the image tag.

There are three standard alignments: top, middle, bottom. Bottom is the default setting. The ALIGN element works like this:

This is ALIGN=TOP

ALIGN=MIDDLE is illustrated here.

ALIGN=BOTTOM is the default setting.

These images were rendered with the following HTML code:

<IMG SRC="../graphics/flowers-for-html.gif" ALIGN="TOP"> This is ALIGN=TOP<P>
<IMG SRC="../graphics/flowers-for-html.gif" ALIGN="MIDDLE"> ALIGN=MIDDLE is illustrated here.<P>
<IMG SRC="../graphics/flowers-for-html.gif" ALIGN="BOTTOM"> ALIGN=BOTTOM is the default setting.<P>

Making your images hot

Just like text, you can make your images hot by marking them up with hypertext links. This is how many WWW pages incorporate navigational aids into their documents. For example, the following tag links like you to a page where you can send a comment to the author:

Please feel free to send a comment.

This feat was accomplished through the following HTML:

<A HREF="../scripts/email-morgan.html"><IMG SRC="../graphics/mailbox.gif" ALIGN="BOTTOM"></A> Please feel free to send a comment.

Using the ISMAP element

The ISMAP element of the image tag is used to tell the WWW browser that this image is an imagemap. This is done by simply adding the ISMAP element to the tag and making the entire image a link. Here is an example:

<A HREF=../scripts/mapserve.acgi$water-map.map><IMG ALIGN=Bottom SRC=../graphics/water-map.gif ISMAP></A>
This HTML is rendered into the following:

Consequently, when the reader clicks on the image, the WWW browser knows to send the clicked point to the program denoted in the hypertext reference. (Please see the chapter on imagemapping for more details.)

Search this book | Previous | Table of contents | Next

This page was first published on September 26, 1995. Feel free to send comments.