p08.html

	Previous Contents Next
8. Displaying Images

Graphic Formats

HTML provides methods for displaying images and other graphics on a page. Two graphic formats are available: GIF and JPEG.

GIFstands for Graphics Interchange Format and was originally designed by CompuServe. This format can handle up to a maximum of 256 colors, usually sufficient for charts, graphs, and line drawings. It is a good general-purpose format.

The GIF format can produce "interlaced" images, meaning that pictures are rendered fully, but with increasing definition, as the image file is downloaded. Thus, the viewer can initially see the outline of the entire image while it is progressively rendered. This contrasts with other formats that render images immediately at highest resolution, but requiring longer to produce the entire image from top to bottom. A format called GIF 89a allows for a "transparent color," making it possible to eliminate a background color from the image so that it appears to "float" atop the browser's background.

The JPEG format was created by the Joint Photogaphics Experts Group. JPEG allows for up to 16.7 million colors, making it the preferred format for rendering photographs.

Most modern graphics packages can work with images in both GIF and JPEG formats, and can produce transparent and interlaced pictures. The following discussion does not cover the production of these images, but assumes their existence as either .gif or .jpg files.

The <IMG> (Image) Tag

To put a GIF or JPEG graphic on your page, use the <IMG> tag and its corresponding SRC (source) parameter. The general format for the tag is

where the "filename.ext" is the name of the .gif or .jpg file containing the image. You need to remember that the <IMG> tag does not cause a line or paragraph break. It produces "in-line" images in that the resulting picture is treated just as any other text character on the line. Therefore, text will be adjusted around the graphic as best as it can be and aligned to the bottom of the image. This is probably sufficient for small, in-line images; however, you will want to exercise more control over placement of larger pictures.

If you want the picture to be displayed stand-alone at the left of the page (its default placement), just place the <IMG> tag between paragraph tags:

or, if you want the picture stand-alone in the center of the page, surround the <IMG> tag with <CENTER> and </CENTER> tags:

When it surrounds an in-line image, text can appear to the left, to the right, or on both sides of the image. It is aligned by default with the bottom of the picture unless you use the ALIGN attribute with a TOP, MIDDLE, or BOTTOM value in the <IMG> tag :

<IMG SRC="filename.ext" ALIGN=BOTTOM> (default)

A different method of picture and text alignment uses the ALIGN parameter with either LEFT or RIGHT to locate the picture and to flow text around it. For example, the specification

aligns the picture to the right of the browser window and flows text around the left side of the image. Likewise, the tag

places the image at the left margin and flows text around it on the right. There is no way to place an image in the middle of the page and flow text around both sides.

Notice that in these examples that there is blank space surrounding the images so that the text does not run right up to the edge of the image itself. This would be particularly noticeable with the image aligned to the left. You can specify the size of the (blank) border around a picture by using the HSPACE and VSPACE parameters (either of which can be used by itself),

where the amount of blank space is given in number of pixels. The space appears on both sides of the image with HSPACE and on the top and bottom of the image with VSPACE. You will need to try various combinations of spacing to get the result you want.

In some cases you may need to stop word wrapping around the image and continue the text flow after the bottom of the picture. For example, you might associate a figure number and title with the picture where the text is longer than one line in length...

Figure 1.
Athens High School homecoming float prior to big game with arch-rival Troy (We won!).
...and then continue the text like is done here. In order to accomplish this, put a (break) tag with a CLEAR parameter after the <IMG> tag and its associated text:

Here is the text preceding the picture...
<IMG SRC="trojan.jpg" WIDTH=125 HEIGHT=161 VSPACE=20 HSPACE=15 ALIGN=LEFT>

Figure 1. 
Athens High School homecoming float prior to big game with arch-rival Troy (We won!).
 
...and here is the text following the picture.

Here, the LEFT specification is used to align the picture to the left and to continue the text at the left margin following the break. You could also align the picture on the RIGHT and continue the broken text on the left.

Bars, Bullets, Icons, and Textures

There are a few of other image types that you may want to use. "Bars" are often used in place of horizontal rules. Also, "bullets" are GIF graphics that can be used in bulleted lists. Both types are placed in documents in the same way as are other images:

<IMG SRC="blugrd.gif"> produces the following bar:

while <IMG SRC="navball.gif"> is used in the following bulleted list:

First item
First item
First item

Another type of graphic is an "icon"--usually a small GIF image--that can be used to draw attention to elements on your page or be used as a clickable graphic (see next page):

In addition, animated GIF images are available and several are used throughout these pages.

Finally, you can use images called "textures" as you page backgrounds.Textures are small patches of colors or other graphic images that are designed to be pieced together for a continuous backdrop for your page. Click on the buttons below the textures to see examples. Your browser will have to be JavaScript enabled. If you can't see the background examples, set the following options from your browser's menu:

NetScape Navigator 3.0 - Options/Network Preferences/Languages/Enable JavaScript
Internet Explorer 3.0 - View/Options/Security/Run ActiveX scripts

These become background textures through use of the BACKGROUND parameter of the <BODY> tag. Whereas you know that to assign a background color you use the statement: <BODY BGCOLOR=colorname>, for a background texture you use:

You can find functional or imaginative borders, bullets, icons, and textures at sites all across the Web.

Scaling Images

It is not absolutely necessary to create an image at exactly the size it will appear on your page. You can use the HEIGHT and WIDTH attributes of the <IMG> tag to scale the image to any size you need:

The dimensions are given either in number of pixels or a percentage of the original dimensions. If you want to maintain the original proportions of the image, enter either the HEIGHT or the WIDTH and the other dimension will scale properly.

Often this scaling property is used to produce "thumbnails" of much larger images (see later). When the viewer clicks on the thumbnail, the original image is called up and displayed. It should be noted, however, that scaling down the image does not reduce its original file size. So, as a general rule, if you wish to use small images, create them small in the first place.

A good use of the HEIGHT and WIDTH parameters is to speed up the loading of web pages that have many images. If these dimensions are provided, the browser can set aside the appropriately sized areas on the page, continue to display all the text, and then fully render the images. In this way a user can proceed to read the page while the images are loading. If you don't know the image size, load the graphic into nearly any drawing or painting program; there is normally a status bar or information item on the menu that can give you the dimensions. Also, HTML editors can usually determine image sizes when the pictures are added to the HTML script.

Alternate Text

With slow speed network access users may have to wait a long time for large images to load. In order to speed up the process, some users choose to turn off the graphic displays of their browsers. In these cases no images are displayed, only a nondescript graphic such as

in place of the image. In order to be considerate of users with text-only browsers, you should provide text alternatives to the graphic images you display. You can do this by using the ALT attribute:

to display something like:

More to Come

You can have even more control over the placement of images when combining them with tables. This topic is covered later. In the meantime, you might want to look around the Web for some eye-popping images that you can include in your pages.

Previous Contents Next