Understanding Bitmap Pictures

In this blog post we are investigating what are bitmap pictures and how they are stored on a computer using binary code.

Bitmap Pictures?

Bitmap pictures (also called raster graphics) are computer graphics made of pixels of different colours. Pictures taken with a digital camera (or a scanner) are bitmap pictures. It is also possible to create bitmap pictures using software such as Paint, Photoshop or the Gimp.

.bmp, .tif, .png, .gif and .jpg are all file extensions for different types of bitmap pictures.

Bitmap Picture Quality

The qualify of a bitmap picture relies on mainly two criteria:

• The resolution of the picture,
• The colour depth of the picture.

Resolution

The quality of a picture is directly linked to the number of pixels in the picture. The number of pixels in a picture depends on the width, height and resolution of a picture.

• The width and height of a picture can be given in pixels or inches.
• The resolution of a picture is the number of pixels per inch and is measured in dpi (dots per inch) or ppi (pixels per inch).

A higher resolution picture contains a higher number of pixels which results in better quality but also a larger file size.

A typical resolution for a picture used on a website would be 72 ppi.
For printing purposes, high quality printing would require a higher resolution (e.g 200 ppi, 300 ppi or even 600 ppi).

A higher resolution picture can be enlarged (zoom in) and may still remain crisp whereas a lower resolution picture will look pixelated when enlarged. So when taking pictures with a smartphone or a digital camera, it is important to consider what will the picture be used for. If the intention is to print large canvas of a picture, it will need to be saved using the highest resolution settings, even though it will take more storage space on the device.

Colour Depth

The Colour depth (or color depth – american spelling) of a picture corresponds to the number of bits used to represent the colour value of a single pixel.

Let’s look at the following pixel art widgets below. They are all based on a different colour depths varying from 1 bit per pixel to 4 bits per pixel.

A you can see a pictue with a higher colour depth uses a higher number of bits per pixel which results in a wider range of colours hence better quality but also a larger file size.

Most bitmap graphics you would find on the web (especially .png or .jpg) would use a colour depth of 24 bits, resulting in a colour palette of 2²⁴ (more than 16,000,000) colours.

The RGB colour coding system uses such a colour depth using 3 Bytes = 24 bits per pixel.

Let’s recap…

Complete this drag and drop activity to highlight the key concepts of bitmap graphics.