Images

In this brief section we consider how to put images in an HTML document as well as the DOs and DON'Ts of using images.

Incorporating Images

Images -- be they photographs, charts, or drawings -- are a great way to spruce up a webpage. Images can either stand alone or be part of a paragraph.

We use the <img> tag to indicate an image. As an attribute, it takes src for the "source" file; this attributes is required. All other attributes are optional, but highly encouraged. For example, to put the file "sourcesmall.jpg" after this paragraph, we include the tag <img src="sourcesmall.jpg"> after this paragraph.

To center it, we include the attribute "align=center" in the tag. We could also align it on the right-hand side of the page. By default, images are aligned on the left.

Types of Images

It is safe to include .jpg and .gif images in your pages. You can also inlude .png graphics. These three types are supported by practically all modern browsers. Do not include bitmap (.bmp) or .tif/.tiff files, or other graphics formats specific to a particular program.

Optional Attributes

You can indicate the dimensions of an image by using the height and width attributes. Each takes an integer value -- the height or width of the image in pixels. You can also use the align attribute. It can take the values left, right and center. If you include an image within a paragraph, you can use the align attribute to determine how the image is placed in a paragraph and how and whether the text of the paragraph will run around the image.

An important attribute is the alt attribute. Alt contains "alternate text", which is often used to describe the image. This is very useful for when people have auto-loading of images turned off, or for when your pages is being viewed by a text-only browser. Browsers for the blind also read alt attributes when converting text-to-speech. The value of the alt attribute must be enclosed in quotes.

Image DOs

Do ...

include height and width attributes. This allows the browser to set aside space for images. This speeds the loading of a page. Otherwise, the browser must wait until the image is loaded, and then try to format the page.
include the alt attribute. It is useful for many visitors.
include thumbnail images, that is, small versions of images. You can use anchors (<a href ...>) to link to larger versions of an image.
keep your images small. Not everyone has a fast internet connection.

Image DON'Ts

Don't ...

forget height, width and alt attributes.
use height and width attributes to "shrink" a large image. You are not shrinking an image; you are only making it appear smaller on the page. The whole image still has to be downloaded.
use really large images on a page. Images between 5 and 20K in size are fine and will load quickly on most computers. For larger images, provide thumbnails and links to larger versions of the images. The occasional 40K image file is ok, but not if there are multiple images on the page. Web Pages That Suck gives reasons why the total size of your page (HTML + loaded images, etc.) should not exceed about 50K in size.
use images/graphics in place of text. All those "cool" buttons take longer to load and provide no extra functionality. If you do use such graphical buttons, you must include alt tags.

Contents	Chapter 2	Previous	Next