Pixels: pictures made of bits — The Foundry

A picture is dots

Each square is one , the smallest dot a screen can show. Tap to turn it on or off. Try the smiley to see a face appear out of pure on and off.

What the screen sees (on = 1, off = 0)

0000000000 0000000000 0000000000 0000000000 0000000000 0000000000 0000000000 0000000000 0000000000 0000000000

Pixels painted

0 of 100

A real screen has millions of these dots, not a hundred. Same idea, just far more of them.

A picture is a grid of numbers. One dot on or off is a single . Line up enough of them and the bits draw a shape your eyes read as a picture. The computer never sees a smiley. It only sees the 1s and 0s.

Color is numbers too

On and off can only make black and white. To get color, each dot mixes three lights: red, green, and blue. Pick a color, then paint.

Red light: 255 · Green light: 107 · Blue light: 107 This is the color in your brush right now, written as three numbers.

Your brush color, as the screen stores it

Red 255

Green 107

Blue 107

Each light goes from 0 to 255. 0 means that light is off, 255 means it is all the way up. Mix the three amounts and you get any color: red plus green makes yellow, all three at full makes white, all three at zero makes black. Three numbers, one dot.

From a hundred dots to millions

You painted a hundred pixels. A real photo is the same trick, scaled way up.

Your grid

100 dots

10 across, 10 down.

A typical phone photo

~12,000,000 dots

And each dot holds three numbers for its color.

A photo is millions of these numbers. Every picture you have ever seen on a screen is a giant grid of pixels, and every pixel is three numbers from 0 to 255. That is the whole secret. Pictures, like everything else in a computer, are just numbers made of .

🔭 A bit of math (the cool part)

One light from 0 to 255 needs 8 (one byte). Three lights per pixel means 24 bits, or 3 bytes, for one dot. Multiply that by millions of dots and you can see why photos are big files.