How Do Computers Store Images? Pixels, Bytes and Compression

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.

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.

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.

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

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 three numbers per pixel suggest that a camera measures red, green and blue at every point, but almost none do. A sensor's light-sensitive sites can only measure brightness, so each one sits under a tiny coloured filter and records just one colour. The usual layout, the Bayer pattern, named after the Kodak engineer who devised it in the 1970s, repeats a square of four filters: two green, one red and one blue. Green gets double the sites because human vision takes most of its sense of fine detail from the green part of the spectrum.

That means two thirds of the colour values in a finished photo were never measured. The camera's processor fills them in by looking at neighbouring sites, a step called demosaicing, and a good algorithm does it so well that the gaps are invisible. They show up only in fine repeating patterns, such as a striped shirt or a distant brick wall, where the guesses go wrong and false rainbows or wavy moire patterns appear. A raw file stores the unprocessed single-colour readings, which is one reason photographers can rework it later with better software.

Not every format stores three full numbers per pixel. An older trick, still used in GIF and in some PNG files, is the palette. The file begins with a table of up to 256 chosen colours, and each pixel then stores a single number saying which entry in the table to use. That cuts the data to a third or less, which is why GIF was so popular when internet connections were slow. It works well for cartoons, logos and simple graphics, but a photograph has far more than 256 distinct colours, so squeezing one into a palette produces visible bands and speckled patterns where smooth gradients should be.

Transparency needs a fourth number. Formats such as PNG can store an alpha channel alongside red, green and blue, saying how opaque each pixel is, from 0 for fully see-through to 255 for fully solid. Values in between let edges blend smoothly into whatever background the image is placed on, which is how a logo can sit cleanly on a coloured web page. JPEG has no alpha channel, so a logo saved as a JPEG arrives with a solid rectangle around it, usually white. If you have ever seen an awkward box around an image on a slide, that is the missing fourth number.

You might expect a pixel value of 128 to be half as bright as 255, but on a standard screen it gives only about a fifth of the light. The reason is gamma encoding. Human vision is far more sensitive to differences between dark tones than between bright ones, so if the 256 levels were spread evenly in terms of light, too many would be spent on highlights the eye cannot tell apart, and shadows would show visible steps. The usual standard for images, sRGB, stores values on a curve that packs more levels into the darks, and the screen undoes the curve when it displays them.

This has a practical consequence that catches out software. Suppose an image has alternating black and white pixels and you shrink it to half its size. Averaging the stored numbers gives 128, which looks noticeably darker than the original pattern seen from a distance, because the true average of the light is half the maximum, and in sRGB that is stored as about 188. Programs that convert to linear light before blending, resizing or blurring get the right answer; those that work on the stored values directly produce images that darken slightly and shift colour at edges, which is why careful graphics software does the conversion.

Image files often carry a number such as 72 or 300 dpi, and many people believe that changing it alters the quality of the picture. It does not. That number is only a note in the file saying how many pixels should be printed per inch; the pixels themselves are untouched. A 4,000 by 3,000 photo has the same twelve million pixels whether its file says 72 or 300. What changes is the size a printer will make it: at 300 pixels per inch it comes out about 13.3 by 10 inches, roughly 34 by 25 centimetres, while at 72 it would be more than 55 inches wide.

For printing, the useful question is how many pixels you have for the size you want. Around 300 per inch suits photographs held at reading distance, while a poster seen from across a room looks fine with far fewer, because the eye cannot resolve such fine detail from further away. Screens ignore the dpi note and simply show pixels, so the old advice to save web images at 72 dpi makes no difference. Enlarging the pixel count in an editing program does not add real detail either: the software must invent the new pixels from the old ones, so it cannot recover what the camera never captured.

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.