Web Image Prep Lesson

September 19, 2002

Web Images    Optimizing for the Web     Color Palettes     Importing Images into BBEdit

Web Images

Where to get images?

Five factors to consider in Web Imagery:

  1. Formats: GIF, JPEG, PNG (always 72dpi)
  2. Color: 8-bit monitor = 256 colors-40(system)= 216 Browser-safe Web Palette
    35% use - 24bit monitor; 55% use - 16bit (thousands); 10% use - 256 monitor
    * If too many colors for monitor, browser will dither images, which looks blurry
  3. Transparency: GIF / PNG support transparency; JPEG doesn't
    Needed to use layers and have things move behind each other
    Needed for Non-rectangular outline of images
  4. Speed: Download time
    1. Use SMALL images or
    2. Compress images
      • LZW Compression in GIF - Use for Computer Generated titles (large areas of same color) 256 colors
      • JPEG - lossy, but use for photographic; dithers on 8bit monitor (thousands of colors)
      • PNG - better compression than LZW, less lossy than JPEG, but not supported fully
    3. 640x480 pixels is most common monitor size
    4. 28.8Kbps or 56Kbps modem most common connection
  5. Animation: Use GIF for animation - use in project #2 (Will be able to add to portfolio later!)
Some other explanations:

Optimizing for the Web:

Process by which file format, storage size, & color are chose to maximize quality yet still enable to download quickly on the web; Reduce size until image quality degrades:
  1. In Photoshop: Crop the image - only include most important info - (i.e. don't show a small ring on a huge gray backdrop)
  2. Resize to 640W max, 480H max, 72 dpi
  3. Jump to Image Ready (Click button on bottom of PS toolbox)
  4. Make sure Original/Optimized is selected from Image Info pop-up (bottom right corner)
    Choose Size/Download Time to see download times
  5. Click 2-Up tab to see original and optimized simultaneously (or 4-Up for more views)
  6. Open Optimize palette: Window > Show Optimize

To Save a JPEG File:

  1. Select options FOR JPEG in Optimized Palette:
    • JPEG
    • Maximum, High, Low, Medium Quality (or move quality slider til happy); low% is bigger
    • Check Progressive box to show overview and sharpen up on web page
    • Increase Blur to lessen JPEG artifacts if necessary (don't over-blur)
    • Matte: JPEG doesn't support it; set to Bkgd color to simulate transparency
    • Check Optimized box to produce smallest file (old browsers won't be able to read it though!)
  2. File > Save Optimized; name it (all lowercase); It will give you the .jpg extension by default.
  3. OptionalTo Save the Settings you've created: Save Settings > name.irs (save to Z: in Optimize folder)

To Save a GIF File:

  1. Select options FOR GIF:
  2. File > Save Optimized; name it (all lowercase); It will give you the .gif extension by default.
  3. Optional To Save the Settings you've created: Save Settings > name.irs (save to Z: in Optimize folder)

Types of Palettes

Exact
Use if contains Only 256 or less colors
System (Mac OS or Windows)
Use if it will only be viewed on that platform
Web
Use for web viewing (216 common colors on Web browsers); Shifts image colors to closest in web palette; least colors, smallest file, not best image quality
Uniform
Creates colors evenly chosen from spectrum; won't shift colorsto include those in your image
Custom
Create your own palette using the color picker
Perceptual
Generates a color table based on colors in the image, with attention to how humans actually perceive color; Perserves overall color integrity
Selective
Generates a color table based on colors in the image, preserves flat colors and Web-safe colors
Adaptive
Generates a color table based on the part of spectrum most used in the image (larger file)

Importing Images Into HTML documents

In BBEdit, drag the image file icon directly from the file window into your source where you'd like it placed.

The Image Drop Options window appears. Fill it in as follows:
Addresssing: Relative
Alt Text: Choose Use: and type in what you'd like for the ALT rollover.
Click Insert.

The follwing code will appear:
<IMG SRC="name.gif" WIDTH=100 HEIGHT=100 ALT="" BORDER=0>
There is no ending tag.

Size attributes: (WIDTH=n HEIGHT=n)
* Will distort if you don't change them proportionately.

ALT="Picture of oak tree= Alternate Text< (shows up on rollovers AND gives text description for non-graphic browsers)

BORDER=N in pixels


Creating Background Images     |     Slicing Images in Imager Ready     |     Back to Syllabus