How Displays Produce Images
A display creates the illusion of a continuous image by lighting up a grid of tiny picture elements called pixels. Even though a screen looks like one picture, it is actually a mosaic of colored dots.
Pixels
A pixel (short for "picture element") is the smallest controllable unit of a digital display. Each pixel can usually change both color and brightness.
Think of a pixel like a single tile in a mosaic. Alone it is just one color, but together thousands or millions of tiles form a detailed image.
Resolution
Resolution is the number of pixels arranged across and down the screen, written as width × height.
- 1920 × 1080 means 1,920 columns and 1,080 rows of pixels
- More total pixels generally mean a sharper, more detailed image
Common resolution names:
| Name | Resolution | Notes |
|---|---|---|
| 720p / HD | 1280 × 720 | Older HD standard |
| 1080p / Full HD | 1920 × 1080 | Very common on monitors and TVs |
| 4K UHD | 3840 × 2160 | Four times the pixels of 1080p |
| 8K UHD | 7680 × 4320 | Still uncommon, very high detail |
Aspect Ratio
Aspect ratio compares the width of the screen to its height. It is usually written as two numbers separated by a colon.
- 16:9 is the standard for modern TVs and monitors
- 4:3 was common on older TVs and some retro displays
- 21:9 is used for ultrawide monitors
You can find the aspect ratio from resolution by simplifying the width-to-height ratio. For example, 1920 × 1080 simplifies to 16:9.
Color Depth
Color depth describes how many bits are used to represent the color of a single pixel. More bits allow more distinct colors and smoother gradients.
- 8-bit color: 256 possible colors per pixel
- 24-bit color (true color): about 16.7 million colors, 8 bits each for red, green, and blue
- 30-bit or higher: used in professional displays for smoother color transitions
Color depth is sometimes called bit depth.
Pixel Density
Pixel density measures how many pixels fit into a given physical area, usually expressed as pixels per inch (PPI).
A higher PPI means pixels are smaller and closer together, making the image look sharper and less "pixelated." That is why a phone screen at 400 PPI can look sharper than a large TV at 100 PPI, even if the TV has more total pixels.
Refresh Rate
Refresh rate is how many times per second the display updates the image, measured in hertz (Hz).
- 60 Hz updates 60 times per second, common for everyday use
- 120 Hz or 144 Hz updates more often, producing smoother motion for games and video
- A higher refresh rate does not change resolution or color depth, but it can make movement feel more responsive
How It All Fits Together
These properties work together to define the image quality of a display:
| Property | Controls | Common units |
|---|---|---|
| Resolution | How much detail fits on screen | pixels (e.g. 1920 × 1080) |
| Aspect ratio | Shape of the screen | ratio (e.g. 16:9) |
| Color depth | How many colors each pixel can show | bits per pixel |
| Pixel density | How sharp the image appears | PPI |
| Refresh rate | How smooth motion looks | Hz |
A display controller receives image data, decides the color of each pixel, and refreshes the entire grid many times per second. The physical technology behind that controller — such as LCD, OLED, or LED — determines how the pixels emit light, but the same basic image-building principles apply to almost all modern screens.
Related Concepts
- Spaced Repetition — review these terms over time to build lasting memory.
- Active Recall — test yourself by explaining resolution, color depth, and refresh rate from memory.