Bitmap graphics are resolution dependent because each element is a discrete pixel.

Images are stored on computers in bitmap or vector form. Watch Caitlyn Merry explain the differences using examples from computer games.

2.6

Welcome to week two of bringing data to life. Last week, you learned how computers represent data as text and colours. This week, we’re going to explore how digital images are encoded. First, let’s explore how computers store images as either a bitmap or a vector. Bitmaps use individual pixels of colour to make up an image. Vectors use lists of information and mathematical equations to draw an image based on data. 20 years ago, I remember playing games like Sonic Adventure and thinking the graphics were amazing. But if you compare it to Pong in 1972 or Shadow of the Tomb Raider in 2018, you can see how computer graphics have improved over time.

46.5

Bitmap games like Space Invaders assemble an image line by line. Doom used 3D bitmap graphics. These pixelated images take up memory, but have more detail. When compared to games like Asteroids and Elite, you can see that vector graphics are smoother, but have fewer details. A picture element or pixel is a single point in a bitmap image. The colour of each pixel is given a value, which is stored as a binary number. The number of pixels in an image is called the resolution. This high definition image has a resolution of 1,920 by 1,080 pixels. Multiplying the width by the height gives a total of 2,073,600 pixels.

92.1

When you zoom in, you can see the individual pixels, which is why enlarged bitmap images appear poor quality. Common file types for bitmap images are JPEG, GIF, and PNG. Vector graphics use coordinates and geometry to make images out of shapes, straight lines, and curves. They can be manipulated without reducing the quality of the image, and the file size will stay almost exactly the same. Vectors are more efficient than bitmap at storing sections of colour, because they do not need to store every pixel of data. But as we saw with our computer games, if, you want detailed images vector graphics may not be the best choice. Common file types for vector images are SVG, PDF, and EPS.

Welcome to Week 2 of Data Representation!

Last week, you learned how computers represent data as text and colours.

This week, we’re going to explore how digital images are encoded, you’ll make pixel emojis, and you’ll create your own image filters using code.

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.

When you zoom in or enlarge a bitmap image, the pixels are stretched into larger blocks. That’s why bitmap images appear in poor quality when you enlarge them too much.

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.

What is a graphic image composed of two images one that is tinted red and the other that is tinted blue when viewed together these images produce a stereoscopic effect?

Are all bitmap graphics are photos?

When you change the size of a n ____ graphic the objects change proportionally and maintain their smooth edges?

Is the process of converting a photograph a song or text into digital information or bits?