A pixel, or picture element, is the basic unit of programmable color on a computer image or display. It is better to think about a pixel as a logical unit, rather than a physical unit. This is because the size of a pixel depends on the current resolution of the display screen. At the maximum resolution of the screen, one pixel maps exactly to one dot group. This means the size of a pixel at maximum resolution is equal to the dot pitch. Smaller resolutions will use more than one dot group to create a single color.
The resolution of the screen is the number of horizontal pixels multiplied by the number of vertical pixels, and is usually written as width x height. For example, a 640 x 480 resolution means that the screen is 640 pixels wide and 480 pixels high for a total of 307,200 pixels. Of course, the color data for each pixel must be stored in computer memory, so a higher resolution uses more pixels and more memory. For example, if each pixel used one byte of memory, our 640 x 480 display would need 300 kilobytes of memory. A 1280 x 1024 display would need 1.25 megabytes. Let's have a look at the following screenshot:
The location in RAM that stores pixel color information is called the framebuffer. The framebuffer is written by a program and then transmitted to the monitor. The cathode ray interprets the pixel color and fires the electron ray at the proper intensity. The deflection plates direct the electron beam to the proper dot groups on the phosphor screen.
In the examples above, the size of each pixel was only 1 byte. However, a pixel can be, and usually is, more than 1 byte. As computers get faster and memory gets cheaper, we can use more bits per pixel. With 8-bit color, red and green each use 3 bits or a total of 8 levels of color each, while blue only uses 2 bits or 4 levels. This totals 256 possible colors for each pixel.
16-bit color, or high color, offers a few different options. One possibility is 4 bits for each red, green, and blue. These 4 bits provide 16 levels for each color for a total of 4,096 (16 x 16 x 16) colors, with an optional 4 bits for transparency. Another possibility is 5 bits per color and 1 bit for transparency for a total of 32,768 colors. Finally, a total of 65,536 can be achieved with 5 bits for both red and blue, and 6 bits for green.
True color is defined at 8 bits per color. This means that red, green, and blue all have 8 bits, or 256 possible color levels. If 24 bits are used, we get a total of 16,777,216 possible colors. These days, 32 bits per pixel are often used. The last 8 bits are for transparency. The transparency allows for different levels of blending with the background colors. This allows for a total of 4,294,967,295 colors per pixel.
The size of the framebuffer is calculated by multiplying the resolution and the numbers of bytes per pixels (color depth). For a game using a 1280 x 1024 display, we need 1280 x 1024 x 4 bytes, or 5 megabytes for the framebuffer. This might not seem like much considering that modern computers often have 8 to 12 gigabytes of RAM. However, it is worth remembering that if we are updating every pixel on screen, we are updating 1,310,720 pixels, or 5,242,880 bytes of data. This is assuming we only fill in each color one time and don't need to blend with overlapping colors.