If you want to place a graphic on the world wide web, you must first make sure that it is in one of the formats supported. Web graphics are all bitmap formats. All the images supplied by Christian Computer Art come as bitmaps and can easily be converted to a suitable web-friendly format. There are many shareware conversion utilities available. In addition, many paint programs will load and save in different formats thereby giving a conversion facility.

The most common format for the web is GIF. There are two types of GIF file: 87 and 89. Both can be either interlaced or non-interlaced. Both types take about the same amount of time to appear. A non-interlaced GIF will gradually appear on the screen. An interlaced GIF will appear much quicker, but will be blurred. As more of the picture downloads, the clearer it becomes.

GIF 89 can also be transparent. That is, you can nominate one of the colours to be "see-through". When a picture is placed on the web the background of the page will show through where the transparent colour is. Transparency is mostly used on the background colour where you want the graphic to appear to as a cut-out, rather than a rectangle. Look at the two Good News Bible Logos* on the left, which have been placed on a red background. The first file has no transparency. The second has the white background marked as transparent.

A common use for GIFs is animation. Just like a TV cartoon, an animated GIF is composed of a series of still pictures that "play" one after the other. Animating a GIF will put movement onto a web page, but will also increase the size of the file.

The next most common format is JPEG (JPG). Generally speaking, JPEGs are used for photographs and GIFs for other pictures. Most programs that save in JPEG format offer a choice of compressions ratios. Whilst JPEGs can compress very well, it is sometimes at the expense of clarity of the picture. In many cases a small loss of clarity is imperceptible. The advice is: experiment to get the best trade-off between file size and picture clarity. Many software packages allow you to save JPEGs as "Progressive". This has a similar effect to having an interlaced GIF.

As full-colour photographs, JPEGs are often 24-bit (16.7 million colours) and therefore larger files, where compression is more important. GIF formats, however, are restricted to 8-bit (256 colours). To reduce a photograph to 256 colours can sometimes lead to tones that are not smooth.

The third format is a new one that has been slow taking off. It is the PNG (Portable Network Graphics) format. Very few web images are in this format.

Web browsers are designed in such a way that when they encounter a file in one of these formats, they will display it on the screen. If you mean for the picture file to be downloaded without being shown, compress it as a zip file (or stuffit, or LHA etc. according to the destination computer) first.

An image can either be "Background" or "Inline". A background image is tiled and is like a wallpaper. It is placed using the BACKGROUND option within the BODY tag. See an HTML reference for more details.

An inline picture is one that appears on the page along with the text and is placed with the IMG tag. The arrows to the left are an inline image. You can also use an inline image instead of text, because the amount of control you have over text in HTML is limited. The heading of this section is an inline image, used as text. It ensures that the reader sees the text exactly as I envisaged it. Whilst I may have this special fancy font on my computer, my readers may not. It takes up more of my web space allocation and slows down the loading of the page, so I use this facility sparingly!

Images can be placed to allow text to flow around one side of them (as with the double arrow above) or they can be placed on their own. Also, images can be clickable to take the reader to another site. Just nest the IMG tags within 'A' tags. Take a look at our links page (click the button on the left) to see this feature in action. This subject is beyond the scope of this article and you should refer to an HTML reference document for more details.

Effect on speed

Anyone who has been involved in graphic design knows the value of using graphics well on the printed page. To a certain extent, this holds true on web pages, also. However the one dimension the webmaster has to pay attention to is the size of the graphic file. The bigger the file, the longer it takes to download. The longer your reader has to wait, the less attractive your site becomes. Take these steps to ensure your graphics are fast loaders:

• Reduce your image palette to as few colours as it will take without spoiling the picture
• Reduce the dimensions of the image
• Make GIFs interlaced and JPEGs progressive(at least there's something to watch during the wait)
• Compress JPEGs as much as you dare
• Make your animations simple
• Try to repeat some images, e.g. bullets, rather then use different pictures. (They do not have to be downloaded for each instance).
• Use a facility such as GIF Wizard to reduce your file sizes
• Place images as low down the page as possible, so the reader can be reading text while the pictures are loading.
• Don't use images in place of text unless you really have to.