Graphics, Part I

Optimizing Images for the Web
Or, Low-Bandwidth Graphics

The Web requires the smallest files possible in order to minimize the time it takes a page to display

• As files get smaller, the quality of the image tends to worsen, but this is not always true!
  • And so Web designers often have to balance the quality of the image against its size
• Three factors affect the size of image files
  1. The physical size of the image, measured in pixels
  2. The number of colors contained in the image (its bit depth)
  3. The format of the file (GIF, JPEG, and PNG)

Pixels, Pixels, Pixels: Resolution

• Screen is made up of little dots of light, or pixels
  • Image is created by electron gun zapping them and turning them a certain color
  • Three phosphor dots (red, green, blue--or RGB) create one colored pixel
• Monitor resolution is rated in terms of the maximum number of pixels it is capable of fitting on the screen.
  • Some standard resolutions, measured in height by width, are:
    • 640x480
      • De facto standard for Web
    • 800x600
    • 1024x768
  • Even though this is maximum, you can set your screen to a lower resolution--which is useful in Web design
    • Demonstration: As can be done in Windows
      Change resolution from 800x600 to 640x480 (or vice versa)
• How many pixels in an inch then?
  • At the standard of 640x480, there are 72 pixels (or dots) per inch (dpi)
  • E.g., same image at different resolutions is physically a different size
  • Demonstrate with Screen Ruler utility
  • This is a key number to remember!
    • Images created/scanned at 72 dpi will be about the same size as the real thing!
• Ways to change image size
  1. HTML's width/height attribute of <IMG> tag
     • Regardless of original size, you can manually set a size (as was explained in the first tutorial, Lesson Three--with copper.gif)
     • Sometimes useful when taking a small file and make it look large--but it often winds up distorting the original:
       (82x68) becomes at 200x200
     • And the pixels become really obvious
     • Making a large image smaller can occasionally be useful
       • But usually it's not a good idea because the file will still take a long time to download--which defeats the purpose.
  2. Image editor such as Photoshop
     • Fairly simple: Image Menu, then Image Size
       .
       • Change Width/Height in Pixel Dimensions, by percent or actual pixel number--keeping the 640x480 standard in mind
       • Ignore Print [on paper] Size except for Resolution, which must be 72 dpi.
       • Choose to Contrain Proportions, usually.
         • Keeps the proportion of width to height the same
         • Maintains the aspect ratio of the image
  • How do you know the real size of your files?? (see Weinman, p. 74)
    1. Win3/95: File Manager/Windows Explorer shows you fairly accurate size
       • Use F5 to refresh the list
    2. Mac: listing in folders is innacurately rounded
       • E.g., listing with graphic files in it
       • Only way to know true size is the Get Info command
         • Highlight the file you want to check, go to File Menu, choose Get Info
         • Keyboard shortcut: COMMAND-I

EXERCISE: shrink a picture and check file size

• Use the image of the UUNET backbone from the "Internet Structure" lecture:
  • BackboneUUNET.jpg
  • The original is a large 864x568, and it weighs in at 120k (too big for most Web images)
• A sunset example of effective size reduction

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
    • Current standard for the Web
  • 65,500 (64k) colors = 16-bit
    • Often just referred to as "thousands of colors" or "high color" (Windows95)
  • 16,700,000 colors = 24-bit
    • Or, "millions of colors" or "true color" (Win95)
• 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: Crank notebook down to 16 colors and display renee.jpg, a 24-bit, 16.7mil, "True Color" image
    
• The more color information, the larger the file (usually), so how do you reduce bit depth?
• DEMO: LView color depth reduction
  • Which is much easier than Photoshop's!
• Reducing bit depth (numbers of colors) in Photoshop (see Weinman, p. 110)
• Select Mode Menu, from the Image Menu:
  • 
    Three most important modes are
    1. Grayscale (monochrome, "black and white")
    2. Indexed Color...
    3. RGB Color
  • Only the Indexed Color mode allows you to adjust number of colors in Photoshop!
    • Less than convenient; which is why many people use another image processor (e.g., LView or DeBabelizer) to reduce color depth
• DEMO: Photoshop method
• Normally, you'll start (say, from a scanned image) in RGB Mode
• Change it to Indexed Color to reduce the bit depth
  • Indexed Color dialogue box pops up
    
    1. Palette: set to Adaptive (see Weinman, pp. 50-51).
       • Palette, as in a painter's palette, is the specific colors that are contained in an image. DEMO: show Photoshop palette.
       • Adaptive Palette, in the conversion from RGB to Indexed Color, means that Photoshop will take colors from the original image itself and do its best to match them and will not bring in new colors.
    2. Color Depth: (key setting), set as low as possible while maintaining sufficient quality
    3. Colors: set automatically when you pick the depth or choose Other for Color Depth and then enter a specific number of colors
    4. Options/Dither: difficult issue
       • "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 with subtle gradations should be dithered and images with solid color should not.

Exercise: Take the 256-color image below, reduce its bit depth, and then check the file sizes (keep it in GIF format).

File Formats

• Almost all images on the Web are either in the GIF (pronounced "jiff" or "giff") or JPEG (pronounced "jay-peg") format
  • GIF = "Graphic Interchange Format"
  • JPEG = "Joint Photographic Experts Group"
• Which makes smaller files?

Compressing JPEG: Step-by-Step

1. JPEG options in Photoshop and LView use different terminology for the same effects. Here are the "JPEG options" dialog boxes for both apps (Photoshop is on the left):
   
2. Photoshop: Setting a smaller "Quality" number makes for a smaller file and a poorer image. Your choices are 0-10.
   LView: Setting a smaller "Compression Quality Factor" does the same thing. Your choices are 0-100.
3. Here's an example of "0" and "10" Quality settings in Photoshop. See also, Weinman's examples (p. 58).

GIF vs JPEG examples

1. See Weinman's many examples (especially p. 56 for JPEG and GIF comparison; and pp. 88-109)
2. Cartoon-like image
3. Photographic image

Exercise: change a GIF to JPEG and a JPEG to GIF, then compare file sizes

• TracerouteWhitehouse.gif (change mode to RGB before converting to JPEG; and use the "3" setting for JPEG when you "Save as a copy").
  
• renee.jpg (change mode to Indexed Color before converting to GIF; use the Indexed Color settings shown next to Renee; "Save as a copy" to convert to "CompuServe GIF").
  

GIF Color Depth, Transparency, and Interleaving Examples

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, or use my handsome face: http://www.tcf.ua.edu/jbutler/JGBphones.jpg

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

References

Lynda Weinman, Designing Web Graphics.2 (Indianapolis, IN: New Riders Publishing, 1996). Available at a discount from www.amazon.com, online bookstore. The best and most comprehensive book on creating images specifically for the Web.