Images

• Explain your content e.g. a diagram.
• Complement your content e.g. illustration.
• Provide visual cues e.g. reading icon when there is a reading.

GIF and JPEG are two of the more commonly used image formats on the web. To ensure that your images will be seen by your audience save your images as either a GIF or JPEG. Also using GIFs or JPEGs will ensure that your images are compressed to a small file size.

Note:
If you want to edit an image it is best to do it in its original format before you saved it for web use. Editing a GIF or JPEG will distort the image.

A third format, PNG (Portable Network Graphic), has emerged over the last few years but cannot be seen by many browsers so is not widely used. PNG is a versatile web graphic format. It is best suited for creating complex live transparency, high-colour graphics or better-compressed low colour graphics.

GIF, JPEG and PNG are platform-independent i.e. they can be viewed on PC, Mac and Unix computers.

GIF (Graphic Interchange format)

A GIF is a compressed graphic file format supported in HTML. This file format is mostly used for graphics, illustrations and diagrams where simple line work and flat areas of uniform colour are characteristic of the graphic.

It was designed to produce a quality image in as small a file size as possible. GIF images use a limited number of colours – they are based on the 216 web-safe colour palette.

• Animated GIFs
• Transparent GIFs

JPEG / JPG (Joint Photographic Experts Group)

A JPEG is a highly compressed format designed for use with photographic images. It uses a more complex compression algorithm than is used for the GIF format. JPEG is an extremely good format for the compression of natural looking images into a very small size.

Photographs are best saved as JPEGs because they have complex patterns, subtle changes in colour and need a larger range of colours than is available in the GIF 216 web-safe colour palette.

Image tag

To include an image in your webpage type the following HTML tag (assuming your image is of an area of wetlands and its file name is wetlands.gif). The 'alt' is used to give a short caption or description of the image.

<img src='wetlands.gif' alt='Boondall Wetlands'>

Remember that images you use on your webpage must be either a 'GIF' or a 'JPG'. If you have an image and it is not in one of these formats then it will have to be converted. There are many programs that can help you with this. An example would be Microsoft's Photo Editor, which comes with all PCs.

Positioning images

1. To centre an image, use the following centre tag (note the spelling - CENTER). Other alignment options are: left, right and center.

<div align='center'>< img src='wetlands.gif' alt='Boondall wetlands'></div>

2. To align your picture in relation to the text use the 'align' attribute within your image tag. You can align your image to the left, right, middle or bottom of your text. Aligning your text to the left or right allows the text to wrap around your picture.

You can add space around your image to help with layout by using 'hspace' and 'vspace'. And if you would like a border around the image use the 'border' attribute.

<img src='wetlands.gif' alt='Boondall wetlands' align='left' height='50' width='50' border='2' hspace='5' vspace='5'>

Experiment with these image tag attributes to see what you can create.

Notes:

• In this example, the width and height of the image are quoted in pixels.
  
• You do not need to include the width and height of your image but it helps improve the speed of your page downloading – it tells the browser how big the image is.
  
• Use Imaging software to find out the width and height of an image.