Representing an image in binary

How do computers store pictures using binary?
Computers use binary for EVERYTHING, from text, to sound, pictures and video. So how are pictures stored? We know that binary uses 1s and 0s. Any picture can be broken down into a series of dots, or pixels. To make a pixel black, we can use the binary digit 1. To make a pixel white, we can use the binary digit 0. The following picture uses this system to draw a cat. 


Starting with the first square (the first 'pixel') in the top left corner, we have this binary pattern for the first row:


The second row has this binary pattern:


The third row has this binary pattern:


and so on.

Putting them together, you can start to see a picture emerge!


Try this exercise
Can you find out what a picture is from its binary data? Make the picture from the following data:

0 1 1 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 1 1 1 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 0 1 0 0 0

How are you getting on? You are struggling! This is because in addition to the actual binary data, you also need some additional information. This is called 'meta-data' and means 'data about the data'. If I told you that the picture was five pixels wide and 10 pixels high, you should now be able to construct the picture from the data:

0 1 1 1 0
0 0 0 1 0
0 0 0 1 0
0 0 0 1 0
0 1 1 1 0
0 1 0 0 0
0 1 0 0 0 
0 1 0 0 0
0 0 0 0 0
0 1 0 0 0

It (just about) looks like a picture of question mark! So in addition to the data, a picture file must contain some meta-data! 

You probably struggled to make out the pictures of a cat and a question mark in the above examples. If you took a black and white picture of a cat with a camera on a phone, for example, the photo would look very different to the above picture! The reason is the number of pixels used to make the picture. The picture of the cat on my screen is about 8 cm by 8 cm (the size will depend upon how your monitor and web browser is set up so it may be different on your screen). In every single square centimetre, I only have a total of 9 pixels!!! That really isn't going to be enough to show photo-quality detail. Suppose in that same 1 square cm I had 90 pixels, or 900 pixels instead? Then I could show a lot more detail, so much detail, in fact, that my picture would look like a photo. The downside of this, of course, is that there is more binary data so the file size is bigger.

The number of pixels you have in an area is known as the 'resolution' of a picture. The higher the resolution, the more detail you can show but the bigger the file size. Resolution is part of the 'meta-data' that is in every picture file.

Displaying pictures in colour
Consider the images above. The smallest unit element that can be displayed in each picture is the 'pixel', which is a shortened word that originates from the phrase 'picture element'. At the moment, we just have one binary digit controlling each pixel. If it is a 1 if it is black and if it is a 0 it is white. This gives us a black and white picture. 

Suppose I allow 2 bits per pixel? That means I have 4 possible codes for each pixel: 00  01  10 and  11. If I gave each of those codes a colour, then each pixel could now have one of four colours instead of one of two colours. Suppose I stored 3 bits per pixel? That means 8 different patterns are possible: 000  001  010  011  100  101  110  111. If each one had its own colour, then each pixel could now have one of eight colours. If each pixel had 8 bits to store its colour, then I could choose any one of 256 colours for that pixel. If I had 16 bits per pixel, I could select any one of 65 000 colours.

When you look at your monitor now, you probably can see lots of icons at the top and bottom of the screen that are simple drawings without much detail that use blocks of colour rather than lots of different shades. It is highly likely that these are a type of picture file called a GIF and these use 8 bits to store the colour of each pixel. When you get a photo on the screen, there is a very good chance that these files are a type of file called a JPEG and these use 16 bits to store the colour of each pixel. Each pixel can be one of about 65 000 colours, which means you can have lots of colours and lots of shades of each colour - perfect for photos! Of course, the more colours each pixel could be, the more binary data you need for each pixel and the bigger the picture file! 

We know that the picture size / resolution are part of the meta-data in every picture. The information about the number of pixels we use to store the colour of each pixel in a picture, which is known as the 'colour depth' is also embedded in the met-data of a picture file. If you use two bits per pixel, that is a colour depth of 2. If you use 8 bits per pixel, that is a colour depth of 8. Interestingly, whenever you take pictures using a camera or make a picture on some software, you can often add your own extra information to it e.g. when the picture was taken, who took it, the GPS coordinates of the picture, a description, copyright information and so on. This information can also be embedded into a picture's meta-data. 

If we store a picture's information pixel by pixel, we hill have what is called a 'bitmap' file of the picture. This is the type of file a scanner can make, to get all of the detail of a picture saved. The only problem with bitmaps is that they are really large files! That means they take up a lot of storage and take time to send over the Internet, which makes them unsuitable for displaying on web pages.

For this reason, image files are usually stored as a different file type. Two common ones are GIF and JPG. These are known as 'codecs' (short for 'coder / decoder') and you can think of each codec as a clever Maths formula. If you take a bitmap and apply the GIF 'codec' to it (you just save or export it as a GIF file), it is much smaller than the original bitmap. You can do the same thing using the JPG codec, or one of the many other image codecs. GIFs are great for icons and drawings that use up to 256 colours and are widely used for icons in software and for pictures on web sites. For more detail such as in photos, JPGs are used. They can use about 65000 colours so you get a lot of detail. So, when you draw a picture on a computer and save it as a particular file type, you are telling the computer to take the raw bitmap file and apply a particular Maths formula or codec to it, and add the correct file extension - .gif or .jpg or whatever it is you saved it as.

Vector images
There is another type of file apart from bitmaps. These are known as 'vector images'. If you drew a circle in Paint or any other drawing application, rather than storing the information as a bitmap pixel by pixel, you store the information that allows the drawing to be recreated instead. You store the formula for a circle, the radius, the line thickness, where the circle should be drawn, colour information and so on. If the image needs to be displayed, this information is taken by the drawing program and the drawing is reconstructed from the information given.

    • Vector images are much smaller than bitmaps.
    • They are great for shapes and mathematical drawings.
    • They can't show the detail that bitmaps can.
    • You can zoom in and out of vector images without losing detail

If you have ever used Google's excellent program called SketchUp then you will have used a program that produces vector drawings rather than bitmaps. Do a search for it and try it out. There are lots of 'Getting started' videos available.

Q1. How many different states can a single bit have? What are they?
Q2. How does a computer know what the size of an image should be? Where is the information it needs held?
Q3. What is meant by 'resolution'?
Q4. What is 'colour depth'?
Q5. What is the colour depth of GIFs?
Q6. What is the colour depth of JPEGs?
Q7. An image has a colour depth of 4. How many different colours are there in the picture?
Q8. What information is held in the meta-data of an image file?
Q9. What is a 'codec'?
Q10. How does a vector image differ from a bitmap image?

Extension work
a) Investigate the different types of image files (GIF, JPEG, TIFF, png etc). Compare and contrast them. Why are there so many different image file types? When is it better to use one type of file than another - for what purpose is one better than another? Try to find some examples to back-up your assertions.
b) Use a vector image program like SketchUp. There are some very good 'Getting started' videos on the SketchUp site and in YouTube. What are the advantages of this type of program compared to programs that use bitmaps?