Web Site Archives 02

Graphic Types

It has been said that a picture is worth a thousand words. So, how come my teachers wouldn't let me hand in a "five picture" essay.

When you are designing a web page, you want to have some pictures to "spice it up". On the other hand, you don't want to have so many pictures that the page takes forever to load (each image has to be copied through the modem to the user's computer). Once you have decided on the pictures that you want on your page, you must decide which format will work best -- gif or jpg.

Computers store pictures as files containing a series of dots, each one a with its specific location and colour. Because each "bit" is "mapped", we refer to this as a "bitmap". These files typically have the extension ".bmp". If you did a search on your computer for *.bmp you would find lots of little (or not so little) files on your hard disk. The biggest problem with bitmap files is that they tend to be very large, because they store the graphical information in its entirety. Thus, there was a need to create files which would look reasonable, but not be as big.

The two formats you will usually see on web sites are gif's (I pronounce these GIFs, although some people call them Jiffs) and jpg's or jpeg's (pronounced jay-pegs). Gifs are best for small graphics with a cartoon-like quality. The reason for this is that the file can only have 256 colours. It doesn't matter which colours, as long as there are only 256 of them. If there are more than 256 colours (as in a photograph), the image can take on a grainy appearance.

The cross to the right is in a .GIF format. It only has three colours (blue, black and white). In its .BMP format, the cross takes 6k (that's about 6000 characters of information), while as a .GIF, it takes less than 1k. The picture will take 1/6 the time to load.

JPGs were originally designed for photographs. They can handle literally millions of colours (every bit could have a different colour). They also have a "quality-control" feature. You can make a JPG retain 100% of its information (highest quality, largest file size, slowest download time) or any number down to 0%. Obviously, you would want a fairly high percentage of quality, but you can experiment with different percentages to see which gives you the best quality at a reasonable size and speed.

The face to the right is a JPG at 75% quality. As a .BMP file, the face takes 10k while in its .JPG format, the picture is only about 5k. Obviously, this is not as big a difference as comparing .BMPs with .GIFs, but the compression is still there. With larger pictures the reduction can be very important.

You can actually display photographs as .GIFs or cartoons as .JPGs, but the best idea is to use each format for what it was intended.