How Do Pixels Work?
Digital displays like computer monitors, mobile phones, and tablets use pixels and the RGB color model to represent images on a digital screen. RGB is an additive color model where the light source within the display device creates the desired color by mixing red, green, and blue, and varying their intensity.
An RGB display is made up of millions of pixels. When it’s time to display an image, each of those pixels receives a small segment of binary code that tells it how to display a certain color. When every pixel is displaying the right color, the colors blend together and the bigger picture becomes discernible for users.
Here’s what you need to know about how pixels work:
Pixels Can Be Any Size
A pixel is a logical unit – not a physical unit – so there is no standard size for the pixels that make up a digital display. Different digital products implement pixels in different sizes, though they are ordinarily square or rectangular in shape.
Individual Pixels Can Be Different Colors
In an RGB display, each pixel has red, blue, and green color elements. Each of these color elements can be expressed at a different intensity (also called saturation), from 0 (least saturated) to 255 (most saturated).
By combining different saturation levels of these three color elements, a pixel can be made to represent over 16 million different colors.
Pixels are Arranged in a Grid
The pixels on a typical digital display are arranged in a grid, with rows of pixels from left to right and columns of pixels from top to bottom. Every pixel in the grid has its own unique address or coordinates. This address is used to transmit the code that determines which color the pixel should display.
Pixels and Digital Photography
A digital camera takes pictures by focusing light on a silicon sensor. This sensor consists of a grid of light-sensitive photosites known as pixels. When you snap a photo, the sensor measures the color and brightness of each pixel and stores it as a number.
Thus, a digital photograph is really just a long string of numbers with the address and color information for every pixel needed to reconstruct the image.
Pixels and Digital Displays
Pixels are the building blocks of every image we see on a digital display. The quality of those images depends on:
- The resolution and format of the source image, and
- The size, display/screen resolution, and resultant pixel density of the digital display.
A vector image uses point-to-point mathematical calculations to form lines and shapes. As a result, vector images can maintain the exact same quality when scaled up or down. In contrast, a raster or bitmap image is made of colored pixels. Zooming in on such an image creates an effect known as “pixelation” where users can see the rectangular outlines of the pixels. A low-resolution image shown on a high-resolution screen will also appear blurry or pixelated.
The quality of image on a digital display depends on Pixel Density – the number of pixels that fit into a square-inch of the screen. Pixel Density depends on both the screen size and the display resolution.
A smaller screen with higher display resolution (more total pixels on screen) will have a greater pixel density and images will appear clear, crisp, and refined. As screens get larger and display resolution smaller, pixel density decreases and high-resolution images can start to appear blocky or pixelated.
The following table lists some common devices, along with their screen sizes, display resolution, and pixel density:
||Pixel Density (PPI)
|Apple iPhone 12
||2532 x 1170 px
|Google Pixel 6
||1080 x 2400 px
|4th Generation iPad
||2048 x 1536 px
|Standard 21-inch Monitor
||1920 x 1080 px (1080p Resolution)
|Modern 27” LED Monitor
||3840 x 2160 px (4K Resolution)