Lesson 5 of 7 · about 10 min
Pictures as numbers
A digital picture is a grid of tiny colored squares called pixels. Each pixel's color is three numbers, how much red, green and blue light to mix.
🧭 What you need first: Hexadecimal and byte sizes
Get really close to a TV screen, or look at a phone screen through a drop of water, and you’ll see the secret: the picture is made of tiny glowing dots, each one either red, green or blue.
Your eyes blend them. A dot with lots of red and green light but no blue looks yellow. All three at full brightness looks white. All three off looks black.
So a computer doesn’t store “a sunset.” It stores a grid of squares, called pixels, and for each one, three numbers: how bright the red, green and blue should be. You already know how to store numbers as bits, so you already know how to store pictures.
Another way: a mosaic
A mosaic is a picture made of small colored tiles. Up close you see tiles; from across the room you see a face. A digital image is a mosaic with millions of microscopic tiles, and each tile’s color is written as numbers.
Another way: paint-by-numbers
Paint-by-numbers kits divide a picture into regions labeled 1, 2, 3, each with a matching paint. A file is the extreme version: every tiny square gets its own number.
Mix light, paint pixels
Mix colors with the three sliders. Notice that mixing light isn’t like mixing paint: red + green = yellow! Then paint a little picture and see how many bytes it takes.
1. Mix a color from light
#F97316
rgb(249, 115, 22) = 3 bytes = 24 bits
2. Paint pixels (click or drag)
The real words
- A pixel (“picture element”) is the smallest dot of an image.
- Resolution is how many pixels: width × height. More pixels = more detail = bigger files.
- RGB: each pixel’s color is 3 numbers, Red, Green, Blue, each 0–255 (one byte). Light mixes additively: all three at 255 is white.
- Colors are often written in hex:
#FF8800= red 255, green 136, blue 0 (orange). - Color depth is the number of bits per pixel. 24 bits (3 bytes) gives 256 × 256 × 256 ≈ 16.7 million colors. A black-and-white image only needs 1 bit per pixel.
- Uncompressed size = width × height × bytes per pixel. A 12-megapixel photo is 12 million × 3 = 36 MB.
- Compression shrinks files:
- Lossless (PNG, ZIP): you get back exactly the original. Trick: describe patterns (“100 white pixels in a row”) instead of listing each one.
- Lossy (JPEG, most video): throws away detail your eyes barely notice. Much smaller files, but you can’t get the original back.
- Same lesson as before: the bits only become a picture because a program agrees to read them as pixels.
Do the math
An image is 100 pixels wide and 50 pixels tall, with 3 bytes per pixel. How big is it uncompressed?
Mixing light
What color is rgb(255, 255, 0): full red, full green, no blue?
What's the difference between lossless and lossy compression?
Got it?
Finish the lesson to color it in on your map and collect its concept cards.
Did this lesson click?