How Do Computers Store Images? Pixels, Bytes and Compression
By the BrainSnail editorial team. How these articles are written and checked, and how to tell us when one is wrong.
A digital photograph is a grid of tiny squares, each one a single colour, and each colour is three numbers. That is the whole of it, and it means a picture is arithmetic before it is anything else: a twelve-megapixel photo is thirty-six million numbers, which would take 36 megabytes to store as they are. Every image format is a different answer to the question of how to write those numbers down using less space.
Pixels and the three numbers
Each square, or pixel, records how much red, green and blue light it should show, because a screen makes every colour by mixing those three. Each of the three values is normally stored in one byte, giving 256 levels from 0 to 255, and the combination gives about 16.7 million possible colours, more than the eye can distinguish. Pure red is 255, 0, 0. White is 255, 255, 255. A mid grey has all three values equal. Some professional formats use more bits per channel to capture subtle gradations in shadows and skies, at the cost of larger files.
The number of pixels is the resolution. A 4,000 by 3,000 photo has twelve million pixels, and its size in bytes uncompressed is simply pixels times three. That is why a picture is so much larger than a document: this article, as text, would fit in the space of a few hundred pixels.
Lossless compression: saying it shorter
Most images contain runs and repetitions, a blue sky that is the same blue for thousands of pixels, and a lossless format finds those patterns and writes them more compactly, in the way that a note saying 'five hundred blue' is shorter than writing 'blue' five hundred times. When the file is opened, every pixel comes back exactly as it was. PNG works this way, and so do GIF and the raw formats cameras save.
Lossless compression is ideal for screenshots, diagrams, text, logos and anything with flat colours and sharp edges, where it can shrink a file dramatically and where any change to a pixel would be visible. It does badly on photographs, because a photo's pixels vary slightly everywhere, with sensor noise and fine texture, so there are few exact repeats to exploit. A lossless photo is rarely less than half its raw size.
Lossy compression: throwing detail away
JPEG, invented in 1992 and still the most common photo format, takes a different bet: the eye does not notice everything, so discard what it will not miss. The image is cut into blocks of eight by eight pixels, and each block is converted from a grid of colours into a set of wave patterns of increasing fineness, a step called the discrete cosine transform. Coarse patterns carry the shape of the image; fine patterns carry texture and noise. JPEG rounds off the fine patterns, heavily or lightly depending on the quality setting, and stores the result.
Colour gets the same treatment. Human vision resolves brightness far more sharply than colour, so JPEG keeps full detail in brightness and stores colour at half or quarter resolution, and almost nobody can tell. The result is a photo at a tenth of its raw size that looks identical at normal viewing, and at high compression the tell-tale artefacts appear: blocky patches in smooth gradients and halos around sharp edges. Every time a JPEG is edited and re-saved it is compressed again and loses a little more, which is why photographers keep a lossless original.
Vectors: storing the instructions instead
A logo or a map need not be stored as pixels at all. A vector format such as SVG stores shapes: a circle of this radius at this position, a line from here to there, text in this font. The file is a list of drawing instructions, and the computer draws them fresh at whatever size is needed, so a vector logo is as sharp on a billboard as on a watch face and the file is tiny. It cannot store a photograph, which has no shapes to describe, and it is the reason icons and fonts on a screen stay crisp at any zoom while photos go blurry. Choosing a format comes down to what the image is:
- •Photograph for the web or a phone: JPEG, or the newer WebP, HEIC or AVIF, which do the same job in less space
- •Screenshot, diagram, text or anything with transparency: PNG
- •Logo, icon, chart or map that must scale: SVG
- •Photograph you will edit again: the camera's raw file or a lossless copy
- •Short animation: GIF or, better, a short video
What travels with the pixels
An image file also carries a header describing its width, height and colour format, and usually a block of metadata: the camera model, exposure settings, date, and often the GPS position where the photo was taken, which is why sharing an original photo can reveal where you were. Social media services strip this data on upload, and re-encode the image too, so the version a friend downloads is a compressed copy of a compressed copy. The numbers underneath are the same three per pixel that every image has been since the first digital photograph in 1957.
The takeaway
A computer stores an image as a grid of pixels with a red, green and blue value each, which is far too much data to keep raw, so formats compress it: PNG losslessly by exploiting repetition, JPEG lossily by discarding fine detail and colour resolution the eye does not notice, and SVG by storing drawing instructions instead of pixels. The right format depends on whether the image is a photograph, a diagram or a shape.