Image Formats

We have all seen images displayed on a computer , but we have probably never given much thought as to how the images are displayed. This page describes two ways that images can be, which are bitmap and vector.

We will also look at some of the standard file formats including bmp, jpeg, gif and png files.

Getting bitty, bitmap images

Computers can store large amount of information arranged in many complex ways, but the information is always stored in a binary format.

When a number is stored in base 2 format, it is said to be in binary format. Binary numbers can contain only the digits 0 or 1, so the number 21 in base 10 is represented as 00010101 in binary.

Each individual 1 or 0 is called a binary digit, which is abbreviated to bit, so this number is said to be an 8 bit number.

If we want to store an image, then we need to describe how it looks using this binary format. When an image is black and white, this can be quite easy, because we can make a "1" represent "white" and "0" represent "black"

Here is a diagram of a black and white letter A, with the binary numbers that would be used to store it:-

You can also use this method to store a colour image. To do this you need to use more than one binary digit (bit) to represent each colour. If we use two bits then each number can store 4 colours (00, 01, 10 and 11). This obviously uses more space to store an image, this table demonstrates how much extra space can be used when a bitmap stores colour information:-

You can see that as an image stores more colours, its size increases dramatically. Photographs usually need at least 32,000 colours in order to look effective when displayed on a computer and may have as much as 24 million colours!

Summary

A bitmap image is an image that is composed of small dots called pixels that are arranged in rows and columns. Each dot is represented by one or more bits. When more bits are used to store information about one pixel, then the computer can use this extra information to display colours.

Advantages of a bitmap

A computer monitor displays information by illuminating dots arranged on the screen in a grid of rows and columns. This is exactly the same way that a bitmap is stored, which means that a computer can display a bitmap image with the very minimum of processing. The display is therefore very quickly updated.

Disadvantages of a bitmap

Bitmaps can rapidly become very large in size. Bitmaps that have many colours can easily become so large that they only just fit onto your computers hard drive.

Bitmaps are not easily updated. If you use an application such as Paint to edit a bitmap, then you cannot alter the image without destroying the original image.

Click here to return to top of page

All line up - Vector images

Bitmap images can soon become very large indeed. When we need to produce extremely large drawings such as a plan of a building or a diagram of the London Underground, a bitmap would become far too large for the computer to store.

Images such as building plans or complex diagrams can be stored in a totally different format, called vector graphics.

A vector is a line directly from one point to another. A vector is described in a totally different way to a bitmap. The computer needs to know either:-

• Where to start from, and where to end or
• Where to start from, what direction to draw the line in, and for how far.

This means that a line that starts in the bottom left hand corner of a sheet of A3 paper and ends in the top right hand corner takes up exactly the same computer storage space as a line drawn across a postage stamp.

Advantages of a Vector format image

Vector images can be scaled (enlarged) as much as you want without any loss of information. Here is a bitmap image and a vector image drawn at normal scale:-

The original image looks the same as a vector and a bitmap:-

Here is the vector image displayed by enlarging the image many times:-

You can see that the line remains smooth.

This is the same image as a bitmap and zoomed at the same level:-

This time, you can see the individual dots, called pixels (stands for picture elements). The computer has attempted to smooth the line by adding a lighter colour yellow to the gaps next to the line, but it still appears to be jagged and distinctly"bitty"

Because vector images can be very complex (image the detail that needs to go into a scale drawing of a car), it is useful to be able to remove sections of the image in order to make the drawing clearer.

Vector images can do this easily, the image is simply redrawn without some of the lines (vectors)

A bitmap image cannot be redrawn the same way. If a line is removed, then the image will have a "hole" where the line was, because the computer will not know what was underneath the line.

Disadvantages of a vector image

Have a look at this photograph (is it a vector or bitmap image?):-

Now try to split the photograph up into single lines (vectors). It would be possible, but would need tens of thousands of vectors. This would need a very powerful computer in order to display the image quickly because each vector has to be drawn (rendered) separately.

So, one disadvantage of a vector image is that it needs a large number of vectors to display some images and you would need a powerful computer to draw these vectors quickly.

Standard File Formats

There are many different kinds of computers in use today from PC's to Mac's, and each kind of computer often uses different applications for displaying and editing images.

This could cause problems when a computer user wanted to display an image that they had generated on someone elses computer. The Internet can be accessed by many different kinds of computer and it is important that a standard format exists that can be displayed on every computer in exactly the same way.

JPEG

As we have already seen, photographs can be stored as a bitmap image, but they soon become very large indeed. Photos are often displayed with many millions of colours and the pixels are quite small. This means that even a small image can be very large (why?)

Here is the same image displayed with different amount of colours:-

These images have 256 colours, 16 colours and 4 colours respectively.

The image sizes are 15K, 6K, and 2K

A group of photographers realised how important a standard image format was for photographs and developed a world standard.

The Joint Photographic Expert Group (JPEG) developed a standard method of saving an image file, which also compressed the image considerably. JPEG images are what is known as "lossless" because the more the image is compressed, the more detail is lost from the actual image.

JPEGs are often used in web pages for photographs and images which have a large amount of intricate detail.