What is Pixel?

Pixel: Simple Definition

A pixel is a single sample of colour, the smallest addressable element of a raster image. An image is a rectangular grid of them, and each stores a number describing its colour, most commonly as red, green, and blue components.

In the usual arrangement each channel gets 8 bits, giving 256 levels per colour and about 16.7 million combinations in total. An optional fourth channel, alpha, stores transparency at the same depth, which is what allows an edge to fade smoothly into whatever lies behind it.

Subpixels are why screens differ from images. A physical display pixel is usually three separate emitters, red, green, and blue, side by side. That arrangement is what text rendering exploits when it uses subpixel antialiasing, and why a screenshot of text can look faintly coloured when magnified.

Color Depth

How many colors a pixel can express depends on its bit depth. The common 24-bit color allocates 8 bits each to red, green and blue, giving 256 levels per channel and about 16.7 million possible colors.^[2] Many formats add a fourth alpha channel to record transparency, so each pixel may store four values rather than three.^[1] Higher bit depths (10 or 12 bits per channel) give smoother gradients and underpin HDR, while lower depths like the 256-color palette of GIF save space at the cost of color accuracy.

Pixels and File Size

Because an image is a grid of pixels, its raw size grows with the total pixel count: a 4000 by 3000 photo holds 12 million pixels, and at 3 bytes each that is 36 megabytes uncompressed. This is exactly why image formats compress, and why resolution drives file size so directly. It also explains the value of resizing: shrinking an image's pixel dimensions to the size it will actually be displayed at removes data that would otherwise be wasted, often cutting file size dramatically before any compression is applied.

Device Pixels versus CSS Pixels

On the web a "pixel" is not always a physical dot. A CSS pixel is an abstract unit, and on high-density displays several physical device pixels render a single CSS pixel; the devicePixelRatio property reports this multiplier.^[1] This distinction lets layouts stay a consistent visual size across screens of widely different sharpness.^[1] It is also why images for the web are often provided at two or more pixel densities, so a "retina" screen can show extra detail while ordinary screens download a smaller file.

Subpixels and Rendering

Each on-screen pixel is physically built from smaller red, green and blue subpixels, and their arrangement varies between display technologies.^[2] Some text-rendering techniques exploit these subpixels to sharpen edges, treating a single pixel as three independently addressable color stripes.^[2]

How Pixels Work

A pixel has no physical size. It is a value, not a square of a fixed dimension, which is why the same 1000-pixel-wide image can be a postage stamp on a dense phone screen and a metre wide on a projector. Physical size only exists when pixels meet an output device with a resolution.

This is also why enlarging a raster image degrades it. The extra pixels have to be invented by interpolating between the ones that exist, and inventing detail is not the same as recovering it. Vector formats like SVG avoid the problem entirely by storing shapes rather than samples.

Bit depth matters more than the pixel count in some work. Eight bits per channel is fine for a finished image but limiting when editing, since heavy adjustment can expose banding in smooth gradients. Raw and TIFF workflows use ten, twelve, or sixteen bits per channel to keep that headroom.

Examples of Pixel