Using Graphics on Web Pages


This week's article looks at web graphics and things to look out for when using graphics on web sites. We shall look at valid graphic formats together with animations and how to avoid those annoying "edges" that appear around so may graphics.

First of all, can you place any type of graphic file onto a web page? The answer is "No". Web graphics (and we shall stick to simple graphics rather than worrying about video files or shock waves), have to be in one of two formats. These are GIF (Graphic Information Files) or JPG (Joint Photographic Editing Group).

GIF's

GIF files are most commonly used for "drawings" (such as cartoons) on the Internet. They are a form of bitmap image but they can be compressed (much smaller than a Windows .BMP (Bitmap) image. They have the following advantages:

· Small file size as they are compressed

· Can have a transparent background (which is most useful on web pages)

· Can be animated. A single GIF file can contain multiple frames that can hold and entire animated sequence (which can also have a transparent background).

Limitations of GIF files.

· Stores a minimum of 256 colours - even when only a few colours are used. This can make the file size bigger than it could be.

· Even simple animations can create large file sizes if you are not careful.

Although GIF's are generally used for drawings, they can be used to store photographic images.

JPG's

JPG's (pronounced "Jay-Pegs") are normally used to store photographic quality images. They have the ability to store millions of colours and, like GIF's they can store the data in a compressed format. Indeed you can set the amount of compression. The trade off is between high quality with a larger file size against poorer quality and a smaller file size.

Advantages of JPG files are:

· Can store super quality images in a relatively small file size (certainly when compared to .BMP files).

· Can set the amount of compression that is applied to an image. Most decent paint packages will show you a "before and after" image of the compression. Reduce the size too much and the quality is lost

· Supports millions of colours but can be reduced to below 256.

Disadvantages

· JPG's do not support animation

· They do not support a transparent background as GIF's do.

These then are the 2 main file formats used for web graphics. Most paint packages will allow you to save images in these formats - although you should note that certain image types will have their properties changed (for example, converting a GIF to JPG will remove the transparent background).

The copyright of the article Using Graphics on Web Pages in PC Support is owned by Chris Cruickshank. Permission to republish Using Graphics on Web Pages in print or online must be granted by the author in writing.

Go To Page: 1 2 3

Articles in this Topic    Discussions in this Topic