intro | design software | page elements | site structure | measurements | fonts | images | colours | layout | tables | templates

the studyzone | web design | course tasks: 1 | 2 | 3

the basic principles


types of image

You'll need some images in your web site, whether they are photos or graphic elements. There are three formats for images that you can use on the web. These are identified by their file suffixes: .jpg, .gif and .png


This is what you should use for photographs and photo-like graphics with fine gradients bewteen colours. This format, though, will always occupy a rectangle or square shape on a web page, having no transparency or see-through quality to permit a background to show.


Use this for block graphics, where a single colour occupies a space, and this format does allow transparency so you can have an irregular shape shown which is ideal for logos and in creating effects that merge an image with its background.

Because .gif files use a limited range of colours they are not suitable for gradients which will appear as bars instead of a smooth transition of shade.


This comparatively recently introduced file format can handle both photo quality images and transparency and is increasingly being adopted by designers. You will usually find a .png file will produce what you require on the web for graphic elements that the more limited .gif cannot. In most cases, you will find that the .jpg option remains the better bet for photos because .jpg can mean smaller file sizes.

image size

A typical photo you may take with a modern digital camera will be way too big for a web page. (OK, if you are making a gallery and want to feature high quality original photos then that's an exception!)

It's too big for two reasons. One: its physical dimensions - how big it looks - are probably several thousand pixels across and even if you want it to occupy the whole of a page you have less than 800 pixels available. A bigger picture will stretch your page and, as well as ruining any layout, it will require users to scroll like mad to see anything.

Two: its file size - that xKB where x is a very large number - will result in the page, even on fast broadband connections, displaying slower than users want.

Note that just re-sizing an image on a web page so that it fits the space you have for it does not change its file size. All that does is squeeze the image information more tightly together - nothing is lost so the file still 'weighs' the same and will take time to display.

re-sizing images

When you have found, or created, an image for use on a web page (and saftely stored the original!) you will need to make two ajustments. Firstly, change the dimensions of the image to fit the space. Most good image editing applications will help you do this and, importantly, will help ensure that you maintain the original proportions of an image. You may, perhaps, wish to crop part of an image as well or make adjustments to its shade, lighting or contrast.

Secondly, your editing application should offer a range of compression options when you save it. .jpg images have a % compression and you should be able to preview the effect of different figures and see the effect on file size. You will often find that a big reduction in file size can be achieved with hardly any noticeable loss of quality in your broswer.

.gif and .png images offer reductions in the numbers of colours used and colour depth. A simple two-colour graphic will not need 256 colours, for example, and, again, significant file size reductions can be achieved without any obvious change on the web.

remember - don't mess with the original!


You may find something called resolution when editing your images. This is expressed in dpi or dots per inch. Your monitor is unlikely to show you more than 96 dpi and many will be set at just 72 dpi. So an image that has a resolution of 300dpi has over three times more information than anyone will be able to see on their screen. For viewing purposes, therefore, you can make big reductions in file size by reducing the resolution to 96dpi which is more than enough for your visitors.

If you are providing good quality images for print, however, then leave the resolution at 300dpi. You may wish to use a low resolution version for display and link to a copy of the original for people to download for print purposes.