Interactive Media Center
University Library, University at Albany

About HTML/XHTML
Technique
Tools
Web vs. Print

Getting Started
Setting Up the Basic Code
Adding and Formatting Text
Nesting Tags
Advanced Text Formatting
Color and the Web
Headings
Lists
Links
Layout and Tables
Advanced Table Formatting
Images
Putting It All Together
Adding An Image
Adding A Simple Table
Main Body Information
Finishing Touches
If You Continue On...

Images

Images are important parts of Web pages. HTML and XHTML allows you to place images in a Web page and assign attributes to control size and placement. In this next section you will learn about image and image coding.

The image source tag is a single-part tag. It is:

<img src="nameofyouimage.gif" />

Here's an example of simple image placement:

The code for the image is:

<img src="images/dogonhat.jpg" alt="" width="205" height="170" />

The information in the code tells us that the image name is "dogonhat.jpg" and that it is located in the images folder of the Web site. You may review how to set up an images folder and the folder structure of a Web site by clicking here. The code also specifies that the size of the image is 205 pixels wide and 170 pixels high.

NOTE: There are three image file types that can be used on the Web. They are JPG (Joint Photographers Experiment Group), GIF (Graphics Interchange Format), and PNG (Portable Networks Graphics). For more information about these three types of file formats, click here.

Image dimensions are specified as attributes. Specifying dimensions assures that the browser will display the image as you wish. In addition, you can use the dimension attributes to manipulate an image to your advantage. For instance, below is a very small image displayed in its "natural" size, 2 pixels wide by 2 pixels high:

orange dot

Can you see it? The image is so small that on some monitors it is nearly invisible. However, we can cause it to be displayed much larger by changing its dimensions. Here it is 40 pixels wide by 40 pixels high:

Orange dot 40 x 40

The code for image is:

<img src="images/orangedot.gif" alt="Orange dot 40 x 40" width="40" height="40" />

Because in both instances the same image is being displayed, there is no delay caused by multiple downloads or by having a larger file size.

Here is the same orange dot displayed as a line:

Orange dot as line

The code is:

<img src="images/orangedot.gif" alt="Orange dot as line" width="300" height="4" border="0" />

Note: Changing an image's dimensions in the HTML code does not actually change the image itself. You are only telling the browser how to display the image. Causing a small image to be displayed large does not increase file size or download time. Conversely, give a large image smaller dimensions does not improve download times for file size.

Beware when manipulating photographs, certain types of drawings, and any image that has fine lines, fades, feathering, or other subtle effects. Making a small image to be displayed larger than it's default size requires "spreading" the data (in the form of pixels) of the image over a broader area. The result will be loss of detail and pixillation.

Desert image 150 pixels wide by 100 pixels highOn the right is a photograph that is displayed at its default dimensions, 150 pixels wide by 100 pixels high.

 

 

Desert image 150 pixels wide by 100 pixels highHere is the same photograph with the dimension attributes set to 400 pixels wide by 267 pixels high. Note that the image is highly pixilated.

Images can have the alignment attributes of left and right. The syntax for the alignment is:

<img src="yourimage.gif" alt=" align="left" />
<img src="yourimage.gif" alt=" align="right" />

Alt tags are special attributes that are applied to images to explain what the image is and what it is about. Individuals who are visually impaired often rely upon a screen-reading Web browser to "read" the text of a Web page to them out loud. An image's alt tag will be read by the application. This makes in imperative that alt tags were well-formed.

Many search engines also use alt tags as a component in their algorithms that calculate result placement. As with screen reading browsers, search engines rely on properly written alt tags.

Below is an image that has an alt tag applied to it.

Green 1940 Ford Delux hot rod automobile

The alt tag for this image is "Green 1940 Ford Deluxe hot rod automobile" and it the entire image tag is:

<img src="images/green40.jpg" alt="Green 1940 Ford Deluxe hot rod automobile" width="300" height="261" />