Web Page Design
Images: Start with Content and Structure
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
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
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.
© Copyright 1999 Associated Universities Inc. Washington D.C.