Graphics, Part I Continued

Bit Depth: I.e., Numbers of Colors

• Bit depth = how many binary digits are used to create color; 2 to the power of x
  • 2 colors = 1-bit
    • Black and green/amber/white in monochrome displays
  • 16 colors = 4-bit (2x2x2x2)
    • Old standard, especially for Windows 3 machines
  • 256 colors = 8-bit
    • Aging standard for the Web
    • Many users still are stuck with it, but most have moved up to . . .
  • 65,500 (64k) colors = 16-bit
    • Often just referred to as "thousands of colors" or "high color" (Windows)
  • 16,700,000 colors = 24-bit
    • Or, "millions of colors" or "true color" (Windows)
• Monitors are rated in terms of the maximum number of colors they are capable of displaying
• Images themselves are comprised of a specific number of colors
  • And thus, they too, have a bit depth
• If you try to view an image on a monitor that supports a lower number of colors than are contained in the image, it will look crummy
  • E.g., if there are millions of colors in an image and you view it on a monitor that can only show you 16 of them, it won't look so hot.
  • DEMO: A 24-bit, 16.7mil, "True Color" image of Renee Zellweger (renee.jpg) looks like this:
    
    If we throw out all the colors in this image except for these 16
    
    the image will begin to show "banding" and discoloration (note the skintones, in particular):
    
    If we continue to reduce the colors in the image to just these 8 colors
    
    the distortion is obvious.
    

• The more color information, the larger the file (usually), so how do you reduce bit depth in an image itself?
  • This will only work in GIF format files. Reducing bit depth in JPEG is irrelevant.
• Click on the 4-Up tab to start the Export process.
  
  You'll see both the original image and the image as it will appear when it's exported.
  This shows the original image of Renee and three different version, each with a different number of colors displayed. How was this done? By using the Optimize "panel."
  
• Open the Optimize Panel, if it's not already visible, by using the Windows Menu.
  
• Each frame in the 4-Up preview displays the graphic with different export settings.
  
  E.g., at 16 colors, the renee GIF would be 8.09k in size and download in 2 seconds on a 28.8kbps modem. (Currently, most modems are twice this fast so use this only to compare figures.)
  
• With the Format set to GIF, you are ready to experiment with the number of colors (the bit depth).
• Make one of the preview windows active by clicking on it once.
• Then use the Optimize panel
  
  to adjust the Settings to "GIF WebSnap 128" (we'll explain this later)
• Once it is changed to GIF, you can set the number of colors for that specific preview
  • Palette, as in a painter's palette, is the specific colors that are contained in an image.
  • If you wish to see the specific colors in a particular palette, open the Color Table panel.
    • DEMO: color table/palette of 16-color renee
      
  • Different palettes may be chosen from the pull-down list in the Optimize panel:
    
    • Adaptive: A custom palette derived from the actual colors in the document. Adaptive palettes most often produce the highest quality image with the smallest possible file size.
    • WebSnap Adaptive: An adaptive palette in which colors that are near in value to Web-safe colors are converted to the closest Web-safe color. This is often the best compromise for good-looking colors for the Web.
    • Web 216: A palette of the 216 colors common to both Windows and Macintosh computers. This palette is often called a Web-safe or browser-safe palette, because it produces fairly consistent results on different platforms and with different browsers.
    • Exact: A palette containing the exact colors used in the image. Only images created with 256 colors or less may use the Exact palette. If the image contains more than 256 colors, the palette reverts to Adaptive.
    • Windows and Macintosh: Each palette contains the 256 colors as defined by the Windows or Macintosh platform standards.
    • Grayscale: A palette of 256 or fewer shades of gray. Using this palette will effectively convert the exported image to grayscale.
    • Black and White: A two-color palette that converts the image to black and white.
    • Uniform: A mathematical palette based on RGB pixel values.
    • Custom: A palette that has been modified or loaded from an external palette or a GIF file. Choose Load Palette from the Export Preview Options pop-up to load a palette.
  • After you pick a palette, experiment with different numbers of colors by entering numbers into the box next to the Palette box.
    • Try different numbers in each of the different preview windows. Which looks the best?
  • Click on the one you like the best to make it active and then click the Export button .
  • Give it a name and save it. You've just reduced the bit depth in a GIF file!
• Dither?
  • Difficult issue.
  • Dithering = "the positioning of different colored pixels within an image that uses a 256-color palette to simulate a color that does not exist in the palette." -- Lynda Weinman
  • Generally, images should not be dithered. Hence, you should normally set the Dither to 0% in Fireworks.

Fireworks Exercise:

Take the 245-color image below, use Fireworks' Export (and a new file name) to reduce its bit depth, and then check the file sizes.

Shortcut for Optimizing Graphics!

NetMechanic provides several valuable Web utilities--including GIFbot.

Exercise: Use GIFbot to optimize the size/format of an online image. Choose one of your own (it must be stored online somewhere), or use this one: http://www.tcf.ua.edu/Classes/Jbutler/T389/WarGamesCredits.jpg

Select both GIF and JPEG for "output image types."

References

1. Lynda Weinman, Designing Web Graphics.3 (Indianapolis, IN: New Riders Publishing, 1999).
2. Lynda Weinman, "IMG Source: Bandwidth Blues?," devhead/ZDNet, December 9, 1998.
3. Fireworks Help and tutorials--available through the Fireworks Help menu (you must be running Fireworks to start these):