Screen Properties: Color Bit Depth - Doc JavaScript

Color Bit Depth

The development of computer graphics technology is similar to the development of televisions. First it was black and white for everyone. Then color appeared, but at such a price that only the upper echelon could afford to work in it. Now, almost everyone has a color TV. The same process applies to computer systems. Almost every system is capable of displaying at least 65,000 colors simultaneously. Only two years ago I bought a Packard Bell computer, equipped with a rather dull Cirus Logic graphic card. Since the computer came with a 17-inch monitor, I had to compromise for only 256 colors. Adjusting it to a higher number of colors slowed down the computer, despite the screaming Pentium processor. My personal experience explains why some of your Web site visitors are surfing with 256 colors.

Most designers support the lowest common denominator to avoid image dithering. The advantage of this approach is that it keeps the colors looking as they were intended, and makes the images look smoother. Nevertheless, it sacrifices quality that site visitors equipped with better video systems could enjoy. The following table shows the correlation between color bit depth and the number of colors that can be simultaneously displayed:

Color Bit Depth	Number of Colors
4	16
8	256
16	65,536 (High Color)
24	16,777,216 (True Color)

The colorDepth property of the screen object reveals the user's color bit depth. This property is very helpful if you're interested in providing the most suitable image for the user's color resolution. For example, you can create two versions of an image -- one with an 8-bit palette (8bit.gif), and the other one with a 16-bit palette (16bit.gif). A simple script offers a dynamic image based on a user's capability to display it:

<SCRIPT LANGUAGE="JavaScript">
<!--
var bName = navigator.appName;
var bVer = parseInt(navigator.appVersion);
var NS2 = (bName == "Netscape" && bVer == 2);
if (window.screen) {
  var url = (screen.colorDepth >= 16) ? "16bit.gif" : "8bit.gif";
  document.write("<IMG SRC='", url, "' HEIGHT='100' WIDTH='300'>");
} else if (!NS2) {
  document.write("<IMG SRC='8bit.gif' HEIGHT='100' WIDTH='300'>");
}
// -->
</SCRIPT>
<NOSCRIPT>
<IMG SRC="8bit.gif" HEIGHT="100" WIDTH="300">
</NOSCRIPT>

Notice the <NOSCRIPT>...</NOSCRIPT> definition which specifies a default image for browsers that cannot execute the script. The conditional statement in the script checks if the browser supports the screen object. If it doesn't, it prints the code for the default image. Navigator 2.0x doesn't support the <NOSCRIPT>...</NOSCRIPT> definition. In other words, it doesn't ignore its content. We set the LANGUAGE attribute of the <SCRIPT> tag to "JavaScript" so that all JavaScript-enabled browsers can execute the script. We then add an additional condition that prevents Navigator 2.0x from printing the image's code in the script. Thanks to this condition, Navigator 2.0x displays the image only once. Also note that this script cannot be used inside a table, because the document.write() method doesn't function properly within table cells.

Created: April 7, 1998
Revised: April 7, 1998

URL: https://www.webreference.com/js/column17/colordepth.html