Graphics · GCSE Computer Science

Bitmap Creator

A bitmap image is a grid of pixels, and every pixel is stored as a number. Type colour codes into the grid to draw a picture, then change the resolution, colour depth and number system to see how the image is really stored.

Your bitmap

How to draw

  1. Pick a resolution and a colour depth.
  2. Press Show Colours to see the code for each colour.
  3. Click a pixel, type its code and press Enter. Or select pixels and click a colour in the panel.
  4. Switch to binary or hex to store the same picture a different way.

Your image

Shown at 4× actual size. Each square on the grid is one pixel.

File size

Real image files also store metadata (like the width, height and colour depth) and often use compression.

Shortcuts Drag across pixels, type a code, then Ctrl + Enter to fill them all Arrow keys move, Delete clears the selected pixels Ctrl + C / V copy and paste, Ctrl + Z undo

How bitmap images are stored

A bitmap is the simplest way to store a picture: a grid of pixels where every pixel is a binary number. These are the key ideas for GCSE Computer Science.

Pixels

A bitmap image is made of a grid of tiny squares called pixels. Each pixel is stored as a binary code, and that code stands for one colour.

Resolution

Resolution is the number of pixels in the image, usually given as width × height. More pixels show more detail, but there are more codes to store, so the file gets bigger.

Colour depth

Colour depth is the number of bits used for each pixel. The number of colours available is 2 to the power of the colour depth: 1 bit gives 2 colours, 4 bits gives 16, 8 bits gives 256 and 24 bits gives 16,777,216.

Calculating file size

File size in bits = width × height × colour depth. Divide by 8 for bytes.

20 × 20 pixels at 4-bit colour
400 × 4 = 1,600 bits
÷ 8 = 200 bytes

Metadata

An image file also stores metadata: data about the image, such as its width, height and colour depth. Without it, the computer wouldn't know how to turn the stream of bits back into a picture. Save a file above and open it to see the metadata at the top.

Frequently asked questions

Why does a higher colour depth make the file bigger?

Every pixel needs more bits to store its colour code, and that extra data is added for every single pixel in the image.

What is 24-bit colour?

8 bits each for red, green and blue. It gives over 16 million colours and is often written as a 6-digit hex code, such as FF0000 for red.

Can I load a picture I made earlier?

Yes. Save gives you a text file, and Load opens it again with the same resolution, colour depth and number system.