Web Page Design

Images: Start with Content and Structure will follow

• GIFs are for drawings:

  • only 256 colors

  • can be transparent, interlaced, and animated

  • great for figures and drawings, terrible compression for images
    

• JPEG are for images

  • 24-bit color

  • can be progressive

  • great for images
    

• Keep images small (@28.8 kbps, one 100 kByte image downloads in over 30 seconds) -- fewer colors, smaller size, higher compression.
  

• Reuse, reuse, reuse!!  Browsers will use the cached version for all but the first download.
  

• Image alignment confusion -- try out the various options 'till you find what you are looking for.
  

• Hex on Hex color designations.  Use names (red, green, blue, mauve, ...) whenever you can.
  

• Images can be linked to other things.
  

• Parts of images can be linked to other things (image maps); use 'client-side' image maps; create with AOL Press, Amaya, or other utility (e.g., MapThis)
  

• If image is large, create a thumbnail and link the thumbnail to the full size image.  Warn the viewer how big the full-size image in case the user wouldn't want to download a 1.4 MByte image of your dog.
  

• HTML allows you to scale a image to a size different than the actual image.  Only scale up.  If you need to scale down, resize the image (using PSP5, for example) and use the smaller image.  Cuts down load time.
  

• Background images can be site killers. Make sure you can see your text on top of a background image.  Check this out on all architectures and browsers.  If in doubt, don't use background images or try a larger font.