Interface Design
 

The Screen > Web Graphics

This page is devoted to Web Graphics, images, and multimedia. All of the images below are links to larger images of the same picture.
Color Depth and Dot Pitch
Technical aspects of the computer screen dictate number of colors that are available for images and graphics. Almost all computer screens are able to render 256 colors. The Windows and Mac platforms have only 216 of these colors in common. These 216 colors are referred to as "web safe colors." As computer equipment evolves and improves, most computers are now able to render millions of colors so this is becoming less problematic.
Dithering
This is a process that reduces the number of colors in an image but maintains the illusion of full color. In fact, color images can be dithered down to two colors (black and white) and maintain the illusion of gray tones. If the user of your web site has his computer screen set to 256 colors, the web browser will automatically dither the color depth to provide only web safe colors.
Band Width
Images with millions of colors can be very large files. It can take quite a while for these images to download. During this time, your user may loose interest and surf away from your page.
Graphic File Formats
There are several types of graphic files being used for the internet today, These are:
  • GIF
  • JPEG
  • PNG
 
 
 
 

Poor Contrast
Care should be taken to maximize the quality of your images before they are placed on your web page. This picture is a "thumb nail" link to open a larger version of the same image. This picture was taken with a digital camera and the flash was inadvertently covered by the photographer's finger. No amount of adjustment will make it fit for the web.

 

After the Fact
These images are difficult to clean up after they have been compressed. This picture was placed on this page to demonstrate JPEG image artifact. To make this artifact pronounced, the poor quality picture from above was compressed, rendered and the color adjusted. Always archive a copy of the original image for future work.

      Top
Picture of young man wearing a cowboy hat.

Graphic Format Demo
Several image types are demonstrated here. Click the links to the right to view the corresponding image. The image below continues the demonstration but has more colors.

 


Progressive JPEG
Compressed. JPEG
.8 Bit GIF

   
Childeren opening christmas gifts.
.Progressive JPEG
Compressed. JPEG
.8 Bit GIF
      Top
   

Rev 20-Sep-2004
John Rivoire