When we open a photo on a phone we see faces, landscapes and colors. The computer sees only a table of numbers. Understanding how that table is built is the first step towards reasoning correctly about formats, compression, resizing and quality. In this article I take a raster image apart piece by piece, without taking anything for granted.
A grid of samples
A raster image (also called a bitmap) is a rectangular matrix: it has a width and a height measured in pixels, and each cell of the matrix holds a value. A 4000 × 3000 pixel photo therefore has 12 million cells, or 12 megapixels.
The word pixel comes from picture element. It helps to think of it not as a little colored square but as a sample: a measurement of light at one point in the scene. The square is just the simplest way a screen can show that sample. This is not pedantry: it explains why enlarging an image adds no detail and why there are different methods for rebuilding the values "between" one sample and the next.
What is inside a pixel
What each cell contains depends on the type of image.
- Grayscale: one number per pixel, representing brightness. With 8 bits you get 256 levels, from 0 (black) to 255 (white).
- RGB color: three numbers per pixel, one each for red, green and blue. Each of these is a channel.
- RGBA: an alpha channel indicating opacity is added to the three color channels.
- Indexed (palette): each pixel holds an index pointing into a color table. This is the principle behind GIFs and palette PNGs.
With 8 bits per channel, an RGB pixel takes 24 bits and can take on about 16.7 million combinations (256 × 256 × 256). It sounds like a lot, but as other articles show, in some gradients it is not enough.
How much an uncompressed image weighs
The calculation is simple and worth being able to do in your head:
bytes = width × height × channels × (bits per channel / 8)
A 4000 × 3000 RGB photo at 8 bits takes 4000 × 3000 × 3 = 36 million bytes, about 34 MiB. The same image at 16 bits per channel doubles, exceeding 68 MiB. The JPEG file on the memory card might weigh 5 MB: the difference is entirely down to compression.
This calculation is useful in everyday work too. When an editing program slows down with many layers open, the reason is that every layer is, in memory, a full uncompressed matrix. Ten layers of that 16-bit photo with an alpha channel easily exceed a gigabyte.
How the data is laid out in memory
A two-dimensional matrix becomes a linear sequence of bytes in memory. There are two main layouts:
| Layout | Data order | Typical use |
|---|---|---|
| Interleaved (per pixel) | R G B R G B R G B… | Most formats and graphics APIs |
| Planar | all R, then all G, then all B | Some scientific and video processing |
Then there is channel order: not every system uses RGB. Some long-standing libraries work in BGR, and anyone writing processing code notices when skies turn orange. Finally, many libraries add padding bytes at the end of each row to align data in memory: the actual length of a row is called the stride or pitch and can be larger than width × bytes per pixel.
Screen pixels and image pixels
Another source of confusion: the pixels in the file do not necessarily match the physical pixels on the monitor. A high-density screen may use two or three physical pixels for each "logical pixel" of the interface. When we view a photo at 100% in an editing program, we usually see one image pixel per physical pixel; in web pages and apps, a scale factor comes into play. That is why a 32-pixel icon can look blurry on a modern screen if there is no double-density version of it.
Why all this matters
Knowing that an image is a grid of numerical samples lets you answer many practical questions yourself:
- Can I enlarge a small photo without losing quality? No: the samples are what they are; you can only estimate what lies between them.
- Why does cropping reduce file size? Because cells of the matrix are removed.
- Why does converting to black and white reduce memory? Because you go from three channels to one.
- Why does rotating by 10 degrees slightly degrade the image? Because the new grid does not line up with the old one and the values have to be recalculated.
In my work analysing digital files this "numerical" view is essential: every operation on an image leaves traces in the pixel values, and reasoning about numbers rather than visual impressions makes the analysis more rigorous.
In short
- A raster image is a matrix of samples: width × height cells, each with one or more channels.
- Uncompressed size is width × height × channels × bytes per channel.
- Data can be interleaved or planar, in RGB or BGR order, with possible row padding.
- Image pixels and screen pixels are different things, linked by a scale factor.
