Images

Your web site is going to be a dull place without images. You will want to include logos and photos. This chapter explains you something about different graphics formats and how to place images in your pages.

Graphics formats and sizes

The most commonly used graphics format is JPEG. The files are names *.jpeg or *.jpg. Almost all digital camera's produce photos in this format. Other commonly used formats are GIF and PNG. All the examples below work with all file formats.

Some graphics converters and drawing programmes allow you to save a GIF file as "interlaced". This allows browsers to draw a rough version of the image before the whole thing is downloaded. In a world of ever increasing bandwidth this is less relevant.

When saving images for your web site, make sure they are not too large. If you image is 100 kilobytes in size, someone with a 512 kbps second connection (say, a cheap ADSL connection) will need two seconds to download it. If you have ten such images on your page, it will take twenty seconds. This may be long enough to get your reader to click on to the next page.

When you build a photo album the reader will expect to wait a bit longer for the page to download. But other pages should load fast. Aim to keep regular pages below 100 kilobyte, including graphics and style sheet.

Inline images

The basic element to include an image is very simple:

<IMG SRC="w3c-html4.gif" ALT="HTML logo">

Where SRC="w3c-html4.gif" specifies the name of the file (SRC stands for source).

The ALT="HTML logo" attribute defines the text that is displayed by a browser that cannot handle graphics or in case the user chooses not to download the graphics. The ALT attribute is obligatory. Visually handicapped people who use special braille computers to browse the web are totally dependant on what you write in the ALT attribute. If you use images as links it is important to remember this and provide an alternative.

WIDTH and HEIGHT attributes

The WIDTH and HEIGHT attributes are used to specify the size of your image:

<IMG SRC="parts/w3c-html4.gif" WIDTH="88" HEIGHT="31" ALT="HTML logo">

Knowing the sizes of the image enables the browser to start lay-out of the page before all the images are downloaded. You can use a drawing or graphics programme to get the size of the images you use. Most browsers can tell you the size of an image of you open it seperately in a new window (right-click or ctrl-click on the image). Good HTML editors can insert width and height automatically.

If you specify anything else that the real size of the picture, most browsers will reduce or enlarge the image to fit the size you specified. Look at what this example does:

<IMG SRC="parts/w3c-html4.gif" WIDTH="400" HEIGHT="31" ALT="HTML logo">

However, the are limits to how far the image can be stretched and the results will be unpredicatable.

TITLE attribute

With images you can use a TITLE attribute. This will make a text appear if the mouse cursor hovers of the image for a short while. You can use this for extra comments. For example:

<IMG SRC="parts/w3c-html4.gif" WIDTH="88" HEIGHT="31" ALT="HTML logo" TITLE="This is the official HTML 4 logo">

This will make the text "This is the official HTML 4 logo" appear when the mouse cursor hovers over the image. This is useful to show extra information with the image. The TITLE attribute works with almost any element.