How Your Computer Displays An Image 

Support this page!

Under heavy construction

The image on your screen is composed of thousands or millions of little dots called "pixels" (short for "picture elements"). The number of pixels used by the display is called the "resolution" of the display. A resolution has a width and a height. Some common resolutions are 640 x 480, 832 x 624 and 1,024 x 768, although there are several others as well.

 Each pixel on the screen is represented by data. How much data depends on how many colors are being represented. Let's use an example to illustrate this. Suppose we had an extremely tiny black-and-white display that was 4 pixels by 4 pixels, and had an alternating pattern of black and white pixels like the following:
 
 
       
       
       
       
0
1
0
1
1
0
1
0
0
1
0
1
1
0
1
0
Since there are only two options for each pixel (black or white), this requires one bit of data for each pixel. If we assign black a value of 0 and white a value of 1, then the data for this display could be represented by the table of data to the right of our hypothetical display.
B&W display B&W data

Each time the computer wants to change the display, it simply changes the data. In the meantime, the video system is busy in the background "drawing" the display. It does this by converting that data into an analog signal controlling an electron beam that "draws" the image on screen. The beam draws a horizontal line of pixels, then drops down one line and draws the next line of pixels, and so on until it has drawn the entire screen. Computer displays "draw" white or colored images on top of a black background. So in this example, the beam might start at the top left and sweep to the right, turning off (black) for the first pixel, on (white) for the second pixel, off for the third pixel, and on for the fourth pixel. Then it would drop to the second line and start over from the left, turning on, off, on and then off. And so on until it had drawn all 16 pixels.

Suppose now that this display is capable of four colors--black, dark gray, light gray and white:
 
 
       
       
       
       
00
01
10
11
11
10
01
00
00
01
10
11
11
10
01
00
Now there are four possible values for each pixel. This can be represented by two digits of binary data per pixel. 00 for black, 01 for dark gray, 10 for light gray and 11 for white. The beam, instead of simply turning on and off, now has intermediate voltages to generate the intermediate brightnesses.
 
 
4-gray display 4 gray data

       
       
       
       
0000
0001
0010
0011
0100
0101
0110
0111
1000
1001
1010
1011
1100
1101
1110
1111
If we want 16 or 256 shades of gray, the concept is the same, but the number of bits used for each pixel doubles each time. 16 shades requires 4 bits/pixel, and 256 shades requires 8 bits/pixel.

 Once we get beyond values of 16, binary numbers can also be expressed more compactly as hexadecimal (base 16, or "hex") numbers, where values from 0-15 are written with the digits 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E and F. The decimal values from 0-255 are written in hex as 00-FF, as in the table below. 
16-gray display 16-gray data

                               
                               
                               
                               
                               
                               
                               
                               
                               
                               
                               
                               
                               
                               
                               
                               
256-gray display
00 01 02 03 04 05 06 07 08 09 0A 0B 0C 0D 0E 0F 
10 11 12 13 14 15 16 17 18 19 1A 1B 1C 1D 1E 1F 
20 21 22 23 24 25 26 27 28 29 2A 2B 2C 2D 2E 2F 
30 31 32 33 34 35 36 37 38 39 3A 3B 3C 3D 3E 3F 
40 41 42 43 44 45 46 47 48 49 4A 4B 4C 4D 4E 4F 
50 51 52 53 54 55 56 57 58 59 5A 5B 5C 5D 5E 5F 
60 61 62 63 64 65 66 67 68 69 6A 6B 6C 6D 6E 6F 
70 71 72 73 74 75 76 77 78 79 7A 7B 7C 7D 7E 7F 
80 81 82 83 84 85 86 87 88 89 8A 8B 8C 8D 8E 8F 
90 91 92 93 94 95 96 97 98 99 9A 9B 9C 9D 9E 9F 
A0 A1 A2 A3 A4 A5 A6 A7 A8 A9 AA AB AC AD AE AF 
B0 B1 B2 B3 B4 B5 B6 B7 B8 B9 BA BB BC BD BE BF 
C0 C1 C2 C3 C4 C5 C6 C7 C8 C9 CA CB CC CD CE CF 
D0 D1 D2 D3 D4 D5 D6 D7 D8 D9 DA DB DC DD DE DF 
E0 E1 E2 E3 E4 E5 E6 E7 E8 E9 EA EB EC ED EE EF 
F0 F1 F2 F3 F4 F5 F6 F7 F8 F9 FA FB FC FD FE FF
256-gray data

For a color display, the concept is very similar, except that now we have three electron beams and three streams of data. All the colors a computer can display can be represented by varying levels of red, green and blue. Suppose we have a nice display that can display Millions of colors. In reality, these millions are composed of combinations of 256 levels of red, 256 levels of green and 256 levels of blue. 256 x 256 x 256 = 16.7 Million. The data are represented by three hexadecimal numbers per pixel--one for each beam:
       
       
       
       
00 00 00 55 00 00 AA 00 00 FF 00 00
00 00 00 00 55 00 00 AA 00 00 FF 00
00 00 00 00 00 55 00 00 AA 00 00 FF
00 00 00 55 55 55 AA AA AA FF FF FF
In the example to the left, the first row contains only varying intensities of red. This is represented in the data by the first pair of numbers for each pixel. The green and blue are zeroed out. The second row contains only green; the third only blue. The last row demonstrates how whites and greys are created from equal proportions of the three primary colors. 
Color display Color data

       
       
       
       
8D CC E0 24 4E 23 FF B4 1C D6 C8 3F 
3D 6D E6 A5 6E 07 A4 37 35 10 2B 31 
D7 31 F5 B7 B9 D9 8A F5 13 12 10 B9 
CD 9F 48 EB FE 98 BC 37 D9 E0 B9 5C
This example shows a hodgepodge of randomly created colors and their corresponding hexadecimal values.
Color display Color data

Now that we know how much data is required to generate a display, we can better understand the relationship between the amount of VRAM (or video memory) that we have installed and the maximum resolution and number of colors that our Macintosh can support.

 Notice that the amount of data involved in generating our hypothetical 4 x 4 has mushroomed. The black and white display required only 1 bit per pixel, while the full-color version required 24 bits per pixel. (in reality, full-color actually requires 32 bits/pixel, where the additional 8 bits are used for a translucency mask). These examples were for a hypothetical display 4 pixels wide and 4 pixels high. In reality, the display you're reading this on right now is several orders of magnitude larger. Each of the example "pixels" above is actually 30 x 30 pixels. For a large display, such as a 21" monitor at 1600 x 1200, the total number of pixels can be in the several millions. Multiply this by 32 bits (or 4 bytes) per pixel, and suddenly it becomes obvious why high-performance video cards need several megabytes of video RAM.
 
 

Warning: Shameless Commerical Plug Ahead!

Books Music  Enter keywords... 
Support this page!!
Amazon.com logo Pay and get paid for auctions or private party transactions, freely and securely over the Internet! Sign up for PayPal now! Get a $5 bonus just for signing up, and get me a $5 referral bonus just for using my referral link!

If you want, you can even make a small donation to this site. Obviously, I don't expect anything, but I have put an awful lot of time, money and energy into this site, so if you've saved yourself time, money or Advil by coming here, you can help me defray the cost of a new G4! Heck, even a dollar would show me that you care :-) Just register with PayPal and send money to steven@kan.org. Thanks!