Computer Science
Bitmapped & Vector Graphics

Bitmapped Graphics

In bitmapped graphics, the image is divided into a grid of picture elements or pixels. When an image is loaded, the binary codes that represent the colour of each pixel are transferred to memory. The term bitmap comes from the way that each binary code is 'mapped' to a single location in memory.

Screen Resolution

The VDU screen is also divided into pixels. The higher the resolution of the display, the greater the number of pixels for the given screen. Having more pixels does not make an image sharper, but the size of each pixel does. The smaller the pixels on screen, the better.

Typical display resolutions are,

  • 1440 x 900
  • 1024 x 768
  • 800 x 600
  • 640 x 480

Colour Depth

Colour depth is the number of bits used to represent the colour of each pixel. The more bits, the greater the range of colours that can be displayed.

1 Bit Colour: A single bit is used to produce a black and white image. Often called monochrome. 0 = black, 1 = white.

8 Bit Colour: A byte is used to represent a palette of 256 colours.

The RGB model expresses colours in terms of the relative brightness of red, green and blue in the colour. 12 bit Direct Colour assigns 4 bits to each of these channels and allows for the representation of 4096 distinct colours.

True Colour display requires 24 bits per pixel, 8 bits for each channel. It allows for 16.7 million colours, about the same as the human eye can perceive.

Most modern PCs have a 32 bit word size - they can manipulate up to 32 bits simultaneously. Colours are often expressed using 32 bits. The spare 8 bits are either ignored or used to represent alpha (for partial transparency).

The RGB model is based on emitted light. We see the colour of most objects by receiving light reflected from their surface. For this reason, printing requires a different model. CMYK (Cyan, Magenta, Yellow, Black) is a common standard.

The Web Safe Palette is based on 216 colours that could reliably be assumed to display the same way in all web browsers. Major differences in the way browsers implement HTML, CSS and Javascript can cause headaches when a web designer wants to ensure that a page displays and works the same way regardless of the browser.

Memory Requirements

100 x 100 pixels means 10000 pixels total. If 24 bit colour is used, we need 3 bytes for each pixel, 30000 bytes in total. Test this assertion using a graphics package. Bitmap files also include some header information - allowing for that you should come fairly close to the figure you calculate.

Encoding Data In Images

If you replaced the bytes used to store the colour of every hundredth pixel with ASCII codes, you could encode a message in an image without changing enough about the way it looks to give yourself away. There is enough information in the Visual Programming section of the C# to do this.

Vector Graphics

Bitmapped graphics represent an image by listing the colours of each pixel. Vector graphics list the details of the shapes that make up the drawing as a whole. Sizes are relative to the drawing as a whole and the resulting format is scalable.

If you have used clipart or have designed in Flash, the chances are you have already used a vector graphic. Notice that no quality is lost when the image is scaled up.

vector art

In the vector graphic format, object information is stored in the Drawing List file.

Each part of the drawing is listed as a series of commands,

Line (10,100,50,100,red,4)
Rectangle(50,50,100,50, filled, black)

Each instruction in the drawing list lists the properties of the object being drawn, the thickness of a line, coordinates, font size, brush style, fill colour, border colour and thickness and more...

Geometric images require fewer bytes to store than in bitmap format. Complex shapes and filled shapes are better stored as bitmaps. Vector graphics scale without distortion.

It is also worth observing that any graphic displayed on screen is effectively a bitmap.