
O.K. Nobody likes this section, but you need to do it!
Designers of computer equipment and software try their best to shield us from the fact that everything is done in in binary digits, but it's not always a successful effort. The problem is that we have ten fingers, but digital things only have two. Knowing the number systems will help you read and understand a lot of computer literature, and some things that are weird when converted to decimal make perfect sense in binary.
As we move to an all-digital television plant, a passing knowledge of the binary system will make you more comfortable.
All number bases work the same. Base 10 uses ten digits... 0 through 9. The highest digit is one-less than the number base, and to go higher than 9, you carry to the next place, which is the "one's place" multiplied by the number base. This will take us to 99, where we carry to the next-place which is number-base multiplied by previous-place.... 10x10... and so on. The tedious way of stating 1,234 in decimal is 1 thousand plus 2 hundreds plus 3 tens plus 4... ridiculous in the base that we know so well, but helpful in unfamiliar number bases.
In all number bases, even though the highest digit is one-less than the number base, the number of digits equals the number base, because of the zero. 0-9 is ten digits.
| 128 | 64 | 32 | 16 | 8 | 4 | 2 | 1 | Decimal |
| 1 | 0 | 0 | 0 | 0 | 0 | 0 | 0 | 128 |
| 0 | 0 | 0 | 1 | 0 | 0 | 0 | 0 | 16 |
| 0 | 1 | 0 | 0 | 0 | 0 | 1 | 0 | 66 |
| 0 | 0 | 0 | 0 | 0 | 1 | 1 | 1 | 7 |
| 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 255 |
In the first row, only the 128 place has a one in it, so the decimal equivalent is 128. In the third row, the 64's place and the 2's place have a one, so the decimal number is 64+2=66. In the last row, the binary number is 11111111, which is 128+64+32+16+8+4+2+1 or 255. The highest decimal number that an eight-bit byte can represent is 255.
Relax, people don't have to work or think in binary, but computers do, and knowing how base two works will explain some mysteries.
Binary numbers all sort of run together... 00110010 is kind of difficult to relate to. Hexadecimal (base 16) numbers are easier to see, and a two-place hex number can represent the range of an eight-bit binary byte (0 to 255).
The scheme follows that of the other number bases, using 16 digits: 0123456789ABCDEF, where "A" is ten, "B" is eleven, and so on. The highest digit, "F" is fifteen... one-less than the number base, as usual. Hex numbers are preceded by "ox", "&" or "#" because some of them look like decimal numbers.
| 16's | 1's | Hex | Dec |
| F | F | oxFF | 255 |
| 1 | 0 | ox10 | 16 |
| 8 | 0 | ox80 | 128 |
| 0 | D | ox0D | 13 |
| C | C | oxCC | 204 |
| It looks fierce, but it follows the rules.
Row one has F (decimal 15) in the 16's column (240) plus F (decimal 15) in the ones column, totaling 255. Row three is 8 sixteens plus 0 ones...128. The last row is C (12) sixteens (192) plus 12 ones. If you can decode oxA7, give the propeller on your cap a spin! |
The Windows™ Calculator will do Binary-Hexadecimal-Decimal conversions for you, if its view is set to to "scientific".
Just about every computer that generates video works in Red, Green, and Blue values. The way it should work is R=255 G=255 B=255 equals WHITE. And R=0 G=0 B=0 equals black. Even though you can start a fist-fight in a room full of computer software people by suggesting this, this scheme is becoming accepted, and we will use it here.
Here is a sample RGB colour chart using these numbers.
| Red Value | Green Value | Blue Value | Result |
| 255 | 255 | 255 | |
| 0 | 255 | 0 | |
| 0 | 128 | 0 | |
| 199 | 167 | 255 | |
| 255 | 126 | 0 |
In some cases (website programming especially), you may have to use hexadecimal number input. The format is RRGGBB. Don't try to convert hex numbers in your head, just use 'em.... FFFFFF is white 00FF00 is green, 808080 is mid-gray, etc. FF50FF is Magenta skewed a bit towards white. You'll catch on.
If you review the stuff about colour bars, you'll notice that we use the colours at 75 percent of their values. The colour system was designed to take pictures of life, and it was not imagined that the camera would be required to reproduce highly saturated colours. Now we would like to stick 100 percent values directly into the RGB channels of the colour coder. Yikes! Take an RGB of 255-255-0... please. This is full red, full green, no blue, and results in bad video.
![]() |
Full Red Matrixed at 30%, and full Green matrixed at 59%
result in a luminance value of 89%. Since the colour is fully saturated,
its chroma stretches plus and minus 40 units, resulting in chroma
that pushes 135 on the scale.
Ironically, if the Blue channel had some content, this would be less of a problem. If Blue were also 255, the video would be 100 units, with no chroma... bright, but OK. There are other troublesome combinations of R, G and B. |
One solution is to de-rate all of the colours to 75 percent, as is done with bars, but this limits a lot of colour. Some systems "catch" problem numbers, and limit them, others allow them to pass. Adobe products like Photoshop® and Premiere® offer a "filter" that will correct illegal colours.
A computer considers a picture to be made of pixels (picture elements). A pixel is the smallest point of light in a computer picture. A picture that is "640x480" is made from 640 pixels from left to right, and 480 pixels up and down... a total of 3,072,000 pixels. If this picture only had pure black or white pixels, it could be represented by a file containing 38,400 bytes (640x480 divided by eight). Each byte could represent eight pixels, with a one being white, and a zero being black. For full colour or continuous gray pictures, more bits are needed. Various picture formats code pictures from eight bits per pixel (256 colours) to "my-calculator-doesn't-go-that-high" per pixel.
Eight bits for each colour of red, green and blue in a pixel is the famous "16 million colours"... actually 16,777,216... it's 256 x 256 x 256, if you've been paying attention. Eight bits per RGB channel is also called 24 bit colour (8+8+8.... three bytes).
A note about 8-bit colour (256 colours). 8-Bit colour works differently than the rest of the colour schemes. 8 bit colour was designed to work on early machines with little storage space, and almost no RAM on the video card. 8-bit colour uses a "look-up" table of 256 colours, called the "pallet", so a number "176" for a pixel was colour number 176 in the pallet. That colour could be any one of 16 million, but the 256 pallet colours had to be pre-chosen to best represent the picture. This is known as indexed colour, because each pixel is "looked-up" in the index (pallet).
|
|
The picture to the left is 160 pixels wide, by 120 pixels high, a total of 192,000 pixels, in 16 million colour space. It takes.... wait for it.... 327 bytes to code this file! How? Compression. The picture contains mostly identical white pixels. The simplest kind of compression codes the top area of this picture as "7,040 white pixels", which can be said in just a few bytes.... ditto the area below the "hello". |
The compression described above is called "lossless" because every pixel can be re-created exactly as the original. Even more astounding results can be had, if we are prepared to use "lossy" compression, and discard information that supposedly cannot be seen. The above picture is a "GIF".... graphics interchange format. GIF's can only be a maximum of 256 colours, but allow transparency to be one of those colours.
"JPEG" (Joint Picture Experts Group) compression is more aggressive, and works best with pictures of real life. The chart below compares the two formats.
31,000 Bytes |
256 colour GIF. The gray gradient at the top shows "stepping"... visible jumps in gray levels. |
7,197 Bytes |
8 colour GIF. Subtle changes are gone.... grouped together as one pallet number. "Dither" has been applied, seen clearly on the gradient... missing colours are simulated by smearing around pixels of similar colours. There are no colours devoted to smoothing (anti-aliasing) the diagonal line. |
26,499 Bytes |
High Quality JPEG. There is still stepping in the gradient, and it's a bit wierd, but JPEG excels at things like the clouds. |
2,739 Bytes |
Low quality JPEG. Note what happens along the edges of the diagonal line, and at the sudden change from the gradient to the clouds. Too many JPEG's like this are seen on the Web. |
To be fair... the gradient is a tough test. Even in full-quality-land, there are only 256 shades of gray to be had... the R, G, and B values from 0 to 255 have to match for the colour to be any single hue from dark to light.
Programs like Photoshop work in the RGB format with no image compression, but cannot be displayed in this web-based format!
Do your best never to re-compress a JPEG image. They get very ugly with repeated trips through the compression math. Save the raw Photoshop files in Photoshop Format (.PSD) in case you ever want to work on your images again.
There are lots of other formats for picture-passing. The TIFF format has too many variants to go into here, but lots of information is available if you Google "TIFF", or "Computer Graphic Formats".
Some image formats allow an extra layer of information that controls how the image will combine with underlying video. You might think an extra bit is all you'd need... "should this pixel show, or be transparent", but this leads to rough-looking edges. The Alpha channel uses levels of transparency, so that the images can blend smoothly. There are various flavors of this between Photoshop, and various computer editing platforms.
![]() |
The grid of pixels that makes up a computer picture can
make smooth curves look "steppy". Computer graphics people
call this "aliasing".
Aliasing is actually a slightly different effect in the digital sampling world, but the word was borrowed without a lot of thought, and has stuck. |
|
|
The top example shows in how anti-aliasing
is done to smooth rounded corners.
The example below is taken before anti-aliasing was applied. Since the process involves throwing in blending pixels graduated to the background colour, if an anti-aliased element is placed as a transparency over a different background, the anti-alising will look awful. |
It needs to be said. Because the first uses of computer graphics were for printing on paper, the concept of "dots per inch" still dogs us. DPI is a meaningless concept in a world where the very same graphic may be displayed on a 9 inch monitor or a 2 meter plasma display.... how big's it now, eh?
The video world only pays attention to pixel dimensions, and they vary slightly. 720x480 is a common size for full-screen 4:3 NTSC video. Some DVD authoring software wants 640x480 for full-screen menu backgrounds. Make sure that you know what size your system uses, or your picture might get stretched in a weird way.
Only a few systems use a vertical dimension of 483 pixels, which corresponds to the number of active, un-blanked scan lines in NTSC.
HOME | BACK | HOW IT WORKS | TIMING | RECORDING | EDITING & TIMECODE | AUDIO | COMPUTERS