Images as Data

Bitmaps and vectors

As you learned in Week 1, text and colours in computers are stored and transmitted as a series of ones and zeros (binary). This is also true for the images and graphics you see on screen. How an image is encoded depends on whether it is stored as a bitmap or a vector image. Bitmaps consist of information about single, discrete, individual pixels of colour that make up an image. Vectors, on the other hand, consist of lists of information and mathematical equations to draw an image based on data. To give you an idea of how images are encoded, let’s think about graphics in video games.

If we compare Pong (one of the first video games) to Sonic Adventure (one of my favourite childhood games) and Shadow of the Tomb Raider, we can see how video game graphics have changed considerably over the years.

What do these transitions tell us about how data is represented as images?

Early in the history of computer games, the two main paradigms for representing data as images on screen were bitmap (also known as raster) and vector, and each had its own advantages for gaming.

Bitmap games

Some of the oldest games were created for cathode ray tube screens (CRTs). In CRTs, guns fire electrons against a glass screen to display images. CRTs are analog displays, and they use voltages that changed over time.

Space War is an example of a bitmap game created for CRTs, and it paved the way for other early analog arcade games that used bitmap images. In these games (e.g. Space Invaders), an electron beam sweeps every line of the display in sequence, forming a grid; each picture is assembled line by line.

A big difference between bitmap and vector graphics becomes obvious if you compare how video games evolved from 2D to 3D. Games like Doom used a set of self-contained, pixelated scenes; making it suitable for 3D bitmap graphics that are very detailed. However, such graphics take up more memory than vector graphics.

Vector games

Early vector games like Tennis for Two also used CRTs, but they manipulate the electron beam to form images, like an oscilloscope.

Just as Space War paved the way for Space Invaders, Tennis for Two and games of its generation led to games such as the infamous Asteroids.

Comparing Asteroids and Space Invaders shows that vector graphics are very smooth, with clearer shapes than bitmap graphics. However, bitmap graphics are more versatile: you can see much more detail in Space Invaders than in Asteroids.

Games like Elite were more suited to vector graphics. Elite was a space trading game with open-ended gameplay, and to make this possible, the developers needed the game graphics to take up much less memory, so they used vector graphics. In Elite II, coloured vector graphics represent realistic star systems, planetary landings, and eventually, Newtonian physics.

This brief history of bitmap vs vector graphics in video games illustrates the main differences in how bitmaps and vector images are represented as data.

Bitmap images

Bitmap images are broken down into tiny elements called pixels (short for ‘picture element’).

Each colour of an image is stored as a binary number. In the image below, each pixel is represented as a single value that is different for each different colour.

The number of pixels in an image is called the image resolution. Resolution is often represented by the width and height of the image in pixels, and multiplying these numbers with one another gets you the total number of pixels. For example, an image that is 1024 pixels wide and 798 pixels high contains 1024 × 798 = 817152 pixels.

Common file types for bitmap images are JPEG, GIF, and PNG.

Vector images

A vector image is made out of shapes, straight lines, and curves. In vector images, coordinates and geometry define different parts of the image.

You can scale vector images without losing resolution; moving, rotating, filling, etc. does not reduce the quality of the image. No matter how much you smaller or larger you make a vector image, its file size always stays almost exactly the same.

Vectors are more efficient than bitmaps at storing sections of the same colour, because they do not need to store every pixel. However, as you could see in the comparison of Space Invaders and Asteroids, vector files are not always the best choice when you want to store very detailed images, such as photographs.

Common file types for vector images are SVG, EPS, and AI.

• Find some vector and bitmap images on your computer. Can you recognise the differences between them? Take a look at their file sizes as well.

Share your observations in the comments below.