Chapter 7: From Dull to Cool by Adding Graphics
125
The small box at the top of Figure 7-1 with a small x inside is not the graphic I wanted to include; rather, it’s an indication from Internet Explorer that an inline graphic was specified with the <img> tag, but not loaded. In this case, the graphic was not loaded because I mistyped the name of the graphics file, specifying black-box.gff rather than black-box.gif. (Did you notice?) Instead, the text of the alt attribute is shown, but it’s definitely not what I want!
To correct the problem, simply fix the spelling. Figure 7-2 shows what the resulting Web page looks like with all the information properly loaded (more attractive than with the unloaded graphic, eh?).
Figure 7-2: The Black Box Web page with the fully loaded graphic.
You may have a fast Internet connection, but remember that many people are trapped with slow dial-up connections at 28,800 baud or—horrors!—slower. Earthlink, America Online, and MSN users can access Web pages, but performance can be quite slow. Bigger graphics have more data to transfer to the user and, therefore, take longer to receive. Also keep in mind that, to speed up access, many users simply modify their Web browser preferences to skip loading the graphics unless they’re required to understand a page. A general guideline in gauging how long a graphic takes to download is to figure that each 1K of graphics size translates to one second of download time for dial-up users. So, when you create graphics, it’s a good idea to look at the file sizes and ask yourself whether the specific graphic is worth the wait. Sometimes it is, but often it isn’t and just creates a frustrat ing situation for the user. A popular use of graphics is a button that you can create by wrapping the <img> tag with an <a> anchor. If I have two button graphics—yes.jpg and no.jpg—here’s how I can spiff up the Black Box page: