Pixels are the smallest picture elements
A digital image on a screen is a grid of tiny elements called pixels. The word is short for “picture element.” Each one shows a single color at a time, and the picture appears when the eye blends thousands or millions of them together. Look closely at a screen with a magnifier and a pixel is not a single glowing dot: it is a cluster of smaller colored parts.
Subpixels make color
Most displays mix color the way stage lights do, by adding red, green and blue light. Each pixel is divided into three subpixels, one for each of those colors. Each subpixel can be set to a different brightness level, and because the pieces are so small and close together, the eye perceives their combined light as one color.
- All three at full brightness look white.
- All three off look black.
- Red and green together look yellow.
- Unequal amounts produce the many colors in between.
How many gradations each subpixel can show is a matter of bit depth. Greater depth means smoother gradients, while too little can produce visible banding.
In an LCD, a color filter sits over each cell and the white backlight passes through it. In an OLED, the subpixel itself can produce its own color of light, or white light can pass through filters. Some displays that use quantum dots convert light to purer red and green, which relates to the range of colors a screen can show, or color gamut.
A quick count
Take a common 1920 by 1080 grid. That is 1,920 pixels across and 1,080 down, so 1,920 × 1,080 = 2,073,600 pixels. With three subpixels in each, the total is 2,073,600 × 3 = 6,220,800 subpixels. This is simple arithmetic for the standard layout; the numbers in real products depend on their design. The idea behind screen resolution is simply how many pixels the grid has.
Layouts: how subpixels are arranged
The pixel grid is the same, but the subpixels inside it can be laid out in different ways.
Stripes. The classic arrangement is three narrow vertical stripes, red, green and blue, side by side in each pixel. It is simple and tends to give even results for lines and text.
Staggered or shifted patterns. Some displays, especially certain OLEDs, arrange subpixels in an offset pattern and may give some colors fewer subpixels than others. A designer might do this because different colors wear at different rates, or because of manufacturing limits. The software then borrows neighboring subpixels to fill in the picture.
Other patterns. Layouts with additional subpixels, such as a white one, exist to boost brightness or efficiency. Different patterns trade off sharpness, brightness, lifespan and manufacturing cost.
Why arrangement affects sharpness
Sharpness depends on more than how many pixels there are. Because each subpixel is a separate light source, an image can be drawn with finer detail than the pixel grid suggests. Some text rendering takes advantage of this by treating the individual subpixels as extra horizontal resolution. The result is crisper text at the same size, at the price of faint colored fringes on edges that some people notice and others do not.
This only works when the software knows the layout. If the layout is unusual or rotated, as in a screen turned to portrait orientation, the technique can produce visible color fringing unless it adjusts. A staggered layout that has fewer subpixels of certain colors can make thin colored lines look slightly rough at a given pixel density, although at high density the difference usually fades.
Pixel density also plays a role. When pixels are packed tightly relative to how far away you sit, the eye cannot resolve individual subpixels, and layout differences become hard to see. On a large screen viewed closely, or on low-density panels, the structure becomes visible. For modular displays, pixel pitch describes the spacing between the light-emitting elements and sets how close a viewer can stand before the structure is noticeable.
Fill factor and the “screen door”
The gaps between subpixels, filled by wiring or a black mask, are not lit. If the gaps are large compared with the lit area, you can see a grid-like pattern sometimes called the screen-door effect. It is most noticeable in magnified views such as headsets. A higher fill factor, meaning more of each pixel is lit, reduces it.
Native resolution
A screen’s physical grid is fixed, so images sized differently must be resampled to fit. This is why native resolution matters: it is the one setting where each image pixel maps to one screen pixel, and any other setting forces interpolation that can look soft.