How Images Are Stored: Pixels and Colour

A picture is really a grid

Look very closely at a screen — close enough and you will see that every image is made of thousands of tiny squares. Each square is a single dot of colour called a pixel (short for picture element). A computer does not store a photo as a "picture"; it stores a long list of numbers describing the colour of each pixel, row by row, like filling in a giant piece of grid paper.

This connects to a bigger idea: computers store everything as numbers. If you have read How Computers Store Data in Binary, you already know those numbers are really 0s and 1s underneath. An image is just one more thing turned into numbers.

Mixing colour with red, green and blue

How do you describe a pixel's colour with numbers? Screens make colour by mixing three coloured lights: red, green and blue, known as RGB. Each pixel stores three numbers — one for the brightness of each light — and each number runs from 0 (off) to 255 (fully on).

Red	Green	Blue	Colour you see
255	0	0	Bright red
0	255	0	Bright green
0	0	255	Bright blue
255	255	0	Yellow (red + green light)
0	0	0	Black (no light)
255	255	255	White (all light)

Mixing light is different from mixing paint. With light, red and green make yellow, and all three together make white. Because each of the three values has 256 possibilities, the total number of colours is 256 × 256 × 256 = 16,777,216 — over sixteen million.

Hex colour codes

When you write web pages with CSS Colours and Fonts, you usually write colours as hex codes like #FF0000. A hex code is the very same RGB numbers, just written in base-16 (hexadecimal) and squashed together:

#  FF    00    00
   ^red  ^green ^blue

Each pair of characters is one colour value from 0–255, where 00 means 0 and FF means 255. So #FF0000 is red 255, green 0, blue 0 — pure red. #00FF00 is pure green, and #FFFFFF (all FF) is white. It looks cryptic at first, but it is exactly the RGB table above in a shorter form.

Resolution: how many pixels

The resolution of an image is how many pixels wide and tall it is, written like 1920 × 1080. To find the total number of pixels, multiply:

total pixels = width × height
1920 × 1080 = 2,073,600 pixels  (about 2 megapixels)

More pixels means more detail — but also more numbers to store, so a bigger file. A small icon might be 32 × 32 = 1,024 pixels, while a phone photo can be over 12 million. This is the trade-off behind image size, and it is why apps often shrink photos before uploading them.

Bit depth: how many colours

How many colours an image can use depends on how many bits are kept per pixel — its bit depth. The common standard stores 8 bits for each of red, green and blue, which is 24 bits per pixel, giving the full ~16 million colours. Fewer bits means fewer colours and a smaller file. An old-style image with only 8 bits per pixel could show just 256 different colours in total — fine for simple graphics, poor for photographs.

A complete worked example

This Python program builds a tiny 3 × 3 image as a grid of RGB pixels and prints it. You can read it without running anything, but if you want to see an image appear, install the Pillow library (pip install pillow) and uncomment the last lines.

# A 3x3 image: each pixel is (red, green, blue), values 0-255
red   = (255, 0, 0)
white = (255, 255, 255)
blue  = (0, 0, 255)

image = [
    [red,   white, red  ],
    [white, blue,  white],
    [red,   white, red  ],
]

# Print the grid as text so you can read the data
for row in image:
    for pixel in row:
        print(pixel, end="  ")
    print()

# Total pixels in this image
height = len(image)
width = len(image[0])
print("\nResolution:", width, "x", height)
print("Total pixels:", width * height)

# --- Optional: actually save it as a real PNG with Pillow ---
# from PIL import Image
# img = Image.new("RGB", (width, height))
# img.putdata([p for row in image for p in row])
# img.save("tiny.png")

Reading the code: image is a list of three rows, and each row is a list of three RGB tuples — exactly how a real image is laid out, just very small. The loop prints every pixel's three numbers. The resolution is 3 × 3, so the total is 9 pixels. The commented Pillow section turns that same grid of numbers into a genuine PNG file you could open.

Try it yourself

1. Make new colours. Change one red to (255, 165, 0) and look up what colour that is. Try (128, 0, 128).
2. Translate a hex code. The hex #FFFF00 splits into FF, FF, 00. Since FF = 255, what RGB colour is it? (Answer: yellow.)
3. Count the cost. A photo is 4000 × 3000 pixels with 3 bytes per pixel. Multiply width × height × 3 to estimate its uncompressed size in bytes, then divide by 1,000,000 for megabytes.

Challenge: Build a 5 × 5 "smiley face" by writing out a grid where eye and mouth pixels are black (0,0,0) and the rest are yellow (255,255,0). Print it, then (if you installed Pillow) save it as a PNG and open it. Notice how a picture really is nothing more than a carefully arranged grid of numbers.