Introductory Web Graphics Tutorial
When designing a web site you should only use .jpeg (.jpg) and .gif graphics for your images. These are the two file formats universally used on the web - basically because they take up less space without much loss of quality. The .PNG format is slowly coming in but is not universally recognized by all browsers yet.

To capture images to use on your web site, you need a scanner or a digital camera - OR you can get free graphics from a number of web sites - however be prepared to spend a long time online looking for the right images.

Make Your Own Graphics
If you have a good graphics program such as Paint Shop Pro - download the free trial fromwww.jasc.com - or Fireworks from Macromedia - www.macromedia.com - you can design your own graphics.

Some Free Graphics Sites

• www.mediabuilder.com - allows you to build personalised 3D text and buttons if you don't have the software to do it yourself
• www.gifoptimizer.com - faster loading keeps people at your site
• www.clipart.com - has links to a huge number of free graphics sites

Basic Rule for Web site Graphics #1 - Use jpegs for photos and gifs for logos
A basic rule of thumb is save the images in .jpeg format for photos and use the .gif format for your logos, and other graphics. Understanding the difference in how these file formats compress an image is important in designing good webpages.

In considering which type to use there are also other considerations. For example GIFs can be transparent, interlaced, or used for animations. JPEGs can be progressively rendered and use a compression method that does not reduce the number of colours in an image - which is why they are better suited for photos.GIFs only support a 256 color palette and so are generally better when there are only a few colours in an image.

Use JPEG for photos, and GIFs for images with only a few colours - and if you have an image with a lot of colours, but not a photo, then save it as both a GIF and a JPEG and see which gives better results.

Basic Rule for Web site Graphics #2 - Do not use large file sizes - optimize
The larger an image is the more KB it will take up, so don't fill your page with photos that are 600 x 480 pixels that take up the whole screen - most visitors will not wait for such large graphics to download. You need to optimize your graphics to take up less space - anything over 30 KB takes too long.

If you are optimizing a JPEG image you need a program that can save your scanned image or digital photo as a JPEG file - Microsoft Photo Editor can do this as well as the more advanced programs such as Photoshop. What you do to compress the photo is click "Save as" and make sure "jpeg" or "jpg" is selected in the file type box. Then you have an option as to how much you want to compress your file. 25 - 35% is usually enough - any more might result in loss of too much quality - however you need to experiment to find which is the best compression for each photo.

If you are optimizing a GIF you need to open it up in a program such as Paint Shop Pro and clear up the image so that it uses fewer solid colours while retaining its quality. The fewer the colours, the smaller the file size. Working on your own gifs can be time consuming and you have to be prepared to spend some time learning how to use your graphics program.

To speed up download times, consider using alternatives to graphics where possible - for example coloured table cells can be quite effective on a Web page.