Images etc.

Introduction

This technical section discusses including images in HTML, which is achieved by way of the <img> tag.

When using images on a web page, you need to bear in mind the following:

file format (.jpg, .gif, or .png)
size of file, bearing in mind download time for users with a modem connection
equivalent text for the image, for blind or partially sighted users or those with text-only browsers

Preparing images for the Web

To prepare an image for the Web, you need to do the following:

Obtain it as a computer file, if it isn't already.
Make it a sensible size (in pixels) for use on the Web.
Convert it to one of the three commonly-used file formats.

Getting images into the computer

Normally, you get images into your computer using a scanner or a digital camera. These devices should come with software that lets you save images as computer files.

Selecting image size

You will probably need to resize images so that they fit appropriately with your design. Try to keep images as small as possible, because that will help reduce the size of the resulting file and hence the download time.

Converting to an appropriate file format

There are three file formats commonly used for images on the Web:

JPEG (.jpg) - use this for photographs (colour or b/w) and other full-colour or grayshade images. Most programs let you select different compression levels, so keep increasing compression (and checking the result in a web browser) until it looks bad. JPGs are always stored as either 24-bit colour or 8-bit grayscale: for best results, alway use this kind of images as source, e.g. do not set your scanner to fewer colours.
GIF (.gif) - use this for simpler images with a small number of flat colours (not continuous, shaded tones), such as computer screenshots or some types of drawing. GIFs are limited to up to 256 different colours in the image.
PNG (.png) - these can be used in similar situations to .gif (although .png does not have the 256-colour limit) but it compresses more effectively and should result in smaller files. However, PNG files can only be viewed on version 4.0 browsers or better.

Images in HTML

You can use the <img> tag to include images in HTML. Specifying width and height attributes can improve page download time; specifying an alt attribute is necessary so that text-only browsers can understand the page.

Setting up

To include an image in your HTML page, you need to upload the image onto the server along with the pages. You can then refer to the image in a similar way to linking to other pages (e.g. "pic.gif" refers to a file in the same folder as the page; "images/pic.gif" refers to a file in the images subfolder of the page's folder).

Example

This example includes an image called "chess.gif" in a page. The image is 200 pixels wide and 150 pixels high, and shows two people playing chess.

Note that the tag does not have a closing </img> because it doesn't contain any content: the entire content of the tag is the image itself.

width= and height=

Including the width and height of the image (in pixels) is optional, but speeds up displaying of the page, because the browser knows how much space to allow for the image; this means that the rest of the page can be displayed before the image has loaded.

alt=

The value of the alt attribute should describe the image. This text will be used in place of the image in text-only browsers, speech browsers, and in ordinary browsers when image-loading is turned off.

It is important to have correct alt attributes that provide useful descriptions of the image (i.e. not "this is a picture" or "turn image loading on") so that your page is accessible to those not viewing images for any of those reasons.

If your image does not have a text equivalent (for example it is purely for decoration) then use an empty alt attribute:

alt=""

If your image contains text (for example, it is a graphical heading) then that same text should be available within the alt attribute.

Page size and download time

Images can really make page size large, so you should be especially careful about the size of all images.

For example, a 50 KB image file is not very big in most circumstances: on the Web, that same image will take most people around 25 seconds to download! In general, the maximum acceptable page loading time (in good circumstances over a modem) is around 15 seconds, so most pages should be about 30 KB or smaller in total (including the HTML file and all images).

You can help reduce download size by:

Using fewer images
Re-using images on different pages (if you use the same image file, the browser will only have to load it once)
Making sure the images are in the appropriate file format and are compressed as much as possible

Summary

Images must be in an appropriate format

JPEG files are appropriate for photographs. GIF files, or sometimes PNG files, are appropriate for some drawings with large areas of flat (not shaded) colour.

Images are placed with the IMG tag

The picture must be stored in a file on the web server and can then be referenced from within the HTML document using an <img> tag. The image will appear at that point in the document.

The ALT attribute provides access

In order to be accessible to those using speech browsers, text-only browsers, or who have turned images off, each image should have an alt attribute providing a basic text equivalent or summary of the image.

Total filesize should be small

The total size of a page (including the HTML file and all image files) should be under 30 KB for the majority of pages. You can usually achieve this by using few images, re-using images where possible, and making sure images are compressed effectively.