Webwork
/
Images in HTML Documents

The ease with which images are added to HTML documents is one of the things that made the World Wide Web so much more widely adopted than the Internet-surfing tools that preceded it.

Although any image anywhere on the Internet could be added to any web page anywhere else on the Internet, usually a Web site's images are integral to site design and the web page author creates his or her own images and stores them in the same place as the HTML document.

Adding an image to a web page:

An image will appear anywhere in your HTML document that you place an image tag. An image tag starts with: <img src=

img - image
src - source
= - equals

add the URL indicating the location of the image: "ape-silverback.jpg"

Then close the image tag: />

The completed image reference in your HTML document would look like this:
<img src="ape-silverback.jpg" />
And onscreen it would look like this:

Image paths:

The URL (in quotes) in the example above is simply the name of the image itself. Web designers frequently put all images into an "image" subdirectory to help organize a site's files. If the image above was located in a subdirectory titled "images," the directory path would be:

<img src="images/ape-silverback.jpg" />

If the image was located on a completely different machine, the full URL (address and path) would be given:

<img src="http://www.re-vision.com/archive/webwork/p08adding-images/ape-silverback.jpg">
Note that it is rude, if not, illegal to link to an image on someone else's Web site without obtaining permission. All work that appears on your site should be your work unless you have specific permission to use it. To find material that you can use legally, check out Creative Commons.

Additional required image tags:

In addition to the very basic tags used in the example above, a complete image tag should also contain these attributes.

alt tag - this is a line of alternative text that will be displayed if the image does not load properly or if someone is viewing the site with images turned off in their browser:

<img src="images/ape-silverback.jpg" alt="Photo of Ape Silverback" />

height and width size tags - these will greatly speed up page loading since the browser won't have to wait for the image to load to figure out how much space to reserve for it:

<img src="images/ape-silverback.jpg" alt="Photo of Ape Silverback" width="150" height="150" />

Here the image is intentionally broken to illustrate how the alt and size tags work:

Photo of Ape Silverback

Images and page load times:

Images can contain meaningful content or be used solely for decoration. In either case, their use should be weighed against the amount of time that they take to download.

Web viewers are about as patient as TV remote-control users on speed - if a page does not load fast, they are gone.

Previous | Webwork Table of Contents | Next >