Skip to content

Binary Representation of Images

All data are stored as binary in computers. How images are represented in binary? To understand how images are stored digitally, first, we need to learn what is a pixel.

What is a pixel?

A pixel (short for picture element) is the smallest element of a display. It is a dot or square in an image that represents only one colour. If we take a close-up of any images, you can see that images are made up of many pixels. To produce a full range of colours, each pixel consists of three LEDs (red, green, and blue). By combining different intensities of the colours, each pixel can display up to 16 million colours, which is way more than 10 million colours the human eye can discriminate.

pixel example
By ed g2s • talk – Example image is a rendering of Image:Personal computer, exploded 5.svg., CC BY-SA 3.0, https://commons.wikimedia.org/w/index.php?curid=807503
By Kprateek88 – Own work, CC BY-SA 4.0, https://commons.wikimedia.org/w/index.php?curid=4635158

Binary images (monochrome)

Now, let us start with binary images where pixels can have exactly two colours – black and white. Since each pixel only has two states, we can use a single bit to represent each pixel – 1 for white and 0 for black. Here is a 10 x 10 pixels image example generated using our binary image visualisation tool.

csplayground.io learning tools

Colour Depth

As demonstrated in the previous example, using 1 bit to represent each pixel can only provide two colour options. Naturally, we can increase the number of bits to represent each pixel and thus expand the possible colour options. For every additional bit we use to represent each pixel, the number of colour options doubles. The number of bits used to represent a single pixel is known as colour depth or bit depth.

1-bit: 2 colours
2-bit: 4 colours
3-bit: 8 colours

8-bit: 256 colours
16-bit: 65536 colours
24-bit: 16777216 colours

For example with 3-bit colour depth, we could create 8 colour variations for each pixel.

8-bit colour depth image

True colour (24-bit)

As of today, almost all computer and phone displays use 24-bit colour depth. The term true colour is often used to refer to all colour depths that are equal to or more than 24-bit. 8 bits each is used to represent the intensity of colour red, green, and blue. Using 8 bits for each colour, the value range from 0 to 255. 

binary 00000000 – decimal 0
binary 11111111 – decimal 255

Resolution

The resolution of an image refers to how tightly pixels are packed together. It is commonly expressed in pixels per inch (PPI). Higher resolutions mean that there more pixels per inch (PPI), resulting in more pixel information and creating a high-quality, crisp image.

Interactive tool

Hands-on generating images of different resolutions using different colour depths.

Other Resources