Everything on a computer screen is represented by pixels (a word derived from 'picture element'). Pixels are arranged in a grid known as a 'raster', which is a 2-dimensional array of cells and involves scanning and refreshing rows of pixels to produce an image. If you sit close a TV you can see the dots that make up the picture because TVs are not designed to be viewed from a short distance, the pixels cannot be seen from a few yards away. Modern computers have enough pixels to be used from a distance of around half a metre without being troubled by the dots.
This image has been magnified so you can see the pixels. Imagine if pixels were always this size!
As with TVs computers have screens with a 4:3 or 16:9 ratio. A typical setting for ease of use on a medium-sized monitor is either 1024x768 (4:3) or 1280x1024 (5:4) (see here). Some of you probably have 'wide-screen' monitors, which are well suited to showing films. There are some interesting numbers here, which you will appreciate later.
We will work with an image of 20 pixels square. This image has 20 rows of 20 pixels and a total number of pixels equal to 20x20=400.
One way of representing an image is to store each pixel in memory. This is what a file has to do so that you can save it and load it again later in exactly the same format.
Each pixel in our image might be represented by 1 bit of memory. A single bit has two states, 1 or 0. The '1' can represent one colour and the '0' can represent another, for example black and white or blue and yellow.
Thus a two-colour image of 400 pixels can be stored in 400 bits. A 2-colour image like this might be produced by a fax machine.
A byte is a convenient way of grouping 8 bits. There are 400/8=50 bytes in 400 bits.
Thus our 400 pixel image might be stored in 50 bytes. An area of memory can be set aside to store the image so that it can be seen on the screen. When the image is stored it will occupy at least 50 bytes.
More useful images will be much bigger, for example images from a digital camera may be around 3,000x2,500 pixels (3,000 x 2,500 = 7,500,000 or 7.5 mega pixels). Cameras use at least 24 bit colour (3 bytes) in their images so file size might be 7.5 million x 3 = 22.5 million bytes or 22.5 mega bytes. This is quite a large file, or it would be if it were not for compression in some file types, primarily the JPG format.
Then again, serious photographers prefer to work in uncompressed RAW format and they favour cameras (mainly digital SLRs) that allow this. Cameras that take very large images include the Canon 1DS and the Phase One.
There are two questions that arise from this:
How does colour affect file size?
Can we make the images smaller (compress them) so they take up less space and can be transmitted faster?
We know that we can store a 2-colour image in a single bit of memory. What if we allocate 2 bits of memory to store the image? Well, 2^2=4 so we can store 4 colours, for example:
| Bit 1 | Bit 0 | Denary | Colour |
| 0 | 0 | 0 | Blue |
| 0 | 1 | 1 | Red |
| 1 | 0 | 2 | Yellow |
| 1 | 1 | 3 | Black |
We have doubled the storage requirement from one bit per pixel to two, but Hey! memory is cheap and plentiful these days. We can now do graphics in 4 colours. You might not think that's much of an achievement but 30 years ago it was cutting-edge! Around 10 years ago it became possible to use 24 bits (3 bytes) of memory to store the colours for each pixel, giving a total of 16.7 million, enough to be called 'true colour'.
Practical Work
Draw another image in 4 colours and devise a way of encoding this new type of image. Write down the memory required to store this image pixel by pixel. Write down the codes for your image, exchange codes with your neighbour and reconstruct the images.
We could go on drawing in ever-increasing colour depth but we would probably get bored. We should now appreciate that if we have 8 bits (1 byte) available for storing the colours of each pixel we will have up to 2^8 colours in our palette (how many colours is this?). If we have 16 bits available we will have 2^16 colours and if we have 24 bits we will have 2^24 colours.
Modern computers have settled, for the time being, on 24 bit colour, with 8 bits for each of the 'additive primaries', red, green and blue (RGB). There are some colour models, however, that use 32 bit colour and some that use 64 bits.
Draw a simple shape on your grid in a single colour by filling in squares with a coloured pen. You will use 2 colours in all. (e.g. a face, flag, rocket, tank, cup, stick figure, house, ball, animal, etc.). Write down under the drawing how many bytes of storage your drawing will use.
Your drawing probably has long runs of white and coloured squares. Can you think of a way of describing the image in a way that says which dots are white and which are coloured? You should look for a way of storing your image as a series of numbers. You should be able to reconstruct the image from the numbers alone. Each number will occupy one byte (as with the characters you saw earlier). How many numbers do you need to represent your image? How many bytes is this? Is the number of bits less than the 400 you need to store every pixel in a single bit?
You should have produced a way of compressing an image by representing it as a series of numbers. Each number is an instruction to assign a colour to a specified number of pixels. If you managed this you are thinking like a computer scientist: make it smaller so it takes up less space and can be transmitted more quickly. The space saved and the reduction in transmission time may be tiny for a 400 bit image but the principles scale up to files of any size. The more compression that takes place the more space you have for other things and the faster the world's networks will run: everybody benefits! Compressing faxes reduces them to around one seventh of their raw size so they are transmitted seven times as fast and take up a seventh of network space.
The technique of representing images like this is called run-length encoding and it is used in the GIF file format.
Practical work
Draw another image and write down the instructions for reconstructing it. Exchange your instructions with a neighbour and draw each other's images.
How many times can the pixels change colour before it takes more numbers to describe it in run-length encoding than it does to store every pixel? How many numbers (changes) take up more space than 50 bytes?
Fill in the squares in such a way that run-length encoding definitely would not compress the space required but increase it. How could this image be compressed? Can we even describe it in less than 50 characters (bytes)?