Appendix C: Browser Compatibility 		index | previous | next


 
Fig. 23  With image auto-loading turned off, and in text-only browsers, the user sees an alt tag rather than the image. Note that since I specified the height and width of the image, the browser drew a box where the image would go when loaded.
 
 

 
Fig. 24  At 1K, this image would be a good choice to load as a low source image for a millions o' colors JPEG. Notice that in the title bar of the browser window, the dimensions of the image are displayed.
 
 

 
Fig. 25  This page uses both a toolbar and a text navigation scheme.
 
 
Image Considerations

Image bloat is a killer. Not in the David Siegel sense of the word, but in the "I'm not going to sit here all day and wait for this page to load" sense.

Image Do's (see Chapter 5 for the hows):

  • Always include an image alt tag, so that people surfing without image auto-loading on can decide whether to load a particular image (Figure 23). Lynx users can often download images to view later, too.

  • For K-fat images, consider using a low source version of the image (Figure 24). Low source images should be less than 10K and the same size and shape as the original image.

  • Always include image dimensions (H and W). That way, the browser can draw the image placeholder immediately and won't have to redraw the whole page after it loads an image (Figure 23).

  • If you use button bars or image maps for site navigation, make sure to offer a text-based navigation scheme as well, or text-only browsers won't be able to click through your site at all (Figure 25).

Tip

  • If you drag an image into the Document window instead of inserting it conventionally, Dreamweaver may leave off the dimensions. You can get dimensions of any image by viewing the image in the Navigator window. Just drag the image into Navigator and look at the title bar (Figure 24).