Designing effective Web graphics is always a challengeyou want to provide the best looking graphics on all platforms, but when one person runs their browser in 8-bit color (for example, 8 bits or one byte to represent a look-up table of colors) and another runs it at 32-bit color, providing the best experience for both of them can prove difficult. One way to partially circumvent this problem is to use the screen.colorDepth property. This read-only property queries the system and returns the number of bits per pixel currently set.
<div id="monitorDepth" />
monitorDepth.innerHTML=("This monitor is currently set to
"+screen.colorDepth+" bit depth.");
Once you have the color depth, you can use this information to set the characteristics of images to display at a higher color depth. For example, this script will automatically load a low color-depth image first, then if the resolution supports it, it will load the higher resolution image:
if (screen.colorDepth=16) or (screen.colorDepth=24) or _
alert "Image can upgrade."