Image encoding

The simplest type of image is made up of a series of binary digits (bits) where each bit represents a single picture element (pixel).

For an image with only one colour (called monochrome), if the bit has a value of 1, the pixel is displayed in the available colour, if it is zero, then the background colour is displayed.

In the examples below the background colour is white, and the foreground colour is black. Each image uses 8 bits on each row, and as there are 8 rows we call this an 8 x 8 bitmap, and it would take up 8 bytes in memory.

The grid below can be used interactively to see how this works. Type 1 into each textbox at the end of the rows and click draw to see what happens. Now type 2 instead and click draw to see what happens. See if you can draw: a horizontal line, a diagonal line and a square.

Activity 1

Use the text boxes on each row above to create each of the 8×8 game sprites in the image above. You will need to create a decimal number for each row, based on the binary pattern for that row:

• If the pixel is on, put a 1 in that position, otherwise make it zero.
• When you have 8 bits for a row, convert that value to decimal.

Here is a worked example for the first sprite:

128	64	32	16	8	4	2	1
0	0	1	1	1	1	0	0	60
0	1	1	1	1	1	1	0	126
1	1	1	1	1	1	0	0	252
1	1	1	1	1	0	0	0	248
1	1	1	1	0	0	0	0	240
1	1	1	1	1	0	0	0	248
0	1	1	1	1	1	1	0	126
0	0	1	1	1	1	0	0	60

Colour images

Colour images can be created in a similar way to monochrome images, however more than one bit must be used for every pixel. In the example below the bitpattern 00 represents black, 01 is white, 10 is blue, and 11 is red.

The number of bits we use to represent a pixel is known as the bit depth. The higher the bit depth, the more colours we can represent. The formula we use to tell us how many colours are possible, is 2ⁿ where n is the bit depth:

• 2¹ = 2 colours (called monochrome because there is just one colour and the background colour)
• 2² = 4 colours
• 2³ = 8 colours
• 2⁴ = 16 colours
• 2⁵ = 32 colours
• …
• 2⁸ = 256 colours

A 4 colour 8×8 bitmap would therefore need 8x8x2 bits (16 bytes).

Activity 2

Type 0, 4, 8, 12 into the top four rows above and click draw. Can you explain what you see? Try converting those three numbers to binary for a clue.

Now try to make solid horizontal lines of red, blue and white.

Calculating image sizes

Images can take up a lot of space in memory (or on secondary storage devices), especially full colour images.

To calculate the size of an image, you multiply 3 numbers:

horizontal size x vertical size x colour depth

For an image that is 100 pixels high, 100 pixels wide, and in monochrome:

100 x 100 x 1 = 10,000 bits or 10,000/8 = 1250 bytes

If it had 2 bit colour depth (4 colours):

100 x 100 x 2 = 20,000 bits or 20,000/8 = 2500 bytes

Going all the way up to 24 bit colour depth (16,777,216 colours) would give:

100 x 100 x 24 = 240,000 bits or 240,000/8 = 30,000 bytes

Metadata

Files that contain images, don’t just contain the binary data that makes up the image itself. They also contain other data which gives additional information about the image. This data is called metadata. You can think of it as “data about data”. The most important data inside the metadata section of the file, records how many pixels horizontally and vertically there are, as well as the bit depth. Without this information the picture cannot be properly displayed.

Files that were created by digital cameras (including the ones found in smartphones), use a metadata format called exif.

Activity 3

Visit this website and view the exif data for the example files listed, or try to find read the exif data from one of your own photos from a digital camera.

Compression

We have seen that bitmap images can take up a lot of space, particularly if they contain a wide range of colours.

For this reason, it may be desirable to reduce the amount of space the image takes up in memory or on secondary storage.

This can be achieved using a technique called data compression. Data compression comes in two forms:

• lossless compression (no data is lost)
• lossy compression (some data is permanently lost)

There are many techniques that can be used to compress data, one involves checking for repeating pixels.

The technique, called Run Length Encoding, works by recording how many consecutive symbols are the same. For example the string:

AAAABBBCCDDDDDD

could be recorded as:

4A3B2C6D

In the case of pixels in a bitmap image, you record how many pixels to skip (i.e. leave in the background colour), and how many pixels to fill in. You carry on, alternating between skipping and filling in, until you reach the end of the data.

Activity 4

A communications device called a fax uses this method to reduce the amount of data to be sent. Use the document below to see how it works.