|
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.
Read more about the screen object in Column 17, Screen Properties.
People who read this tip also read these tips:
Look for similar tips by subject:
| 
