This chapter teaches you how to ensure that your Web pages will appear as quickly as possible when people try to read them. This is essential for making a good impression with your pages, especially with people who will be accessing them through modem connections to the Internet.
The single most important and effective thing you can do to speed up the display of your pages is to make your graphics files as small as possible.
In Chapter 10, "Creating Web Page Images," you learned how to set the compression level for JPEG images and select the number of colors for GIF images. With both types of graphics files, you need to try to find a balance between acceptable image quality and maximum speed.
Figure 11.1 compares the results of saving two graphics files at various GIF- and JPEG-quality settings (keep in mind that the differences are more obvious in color). The numbers in parentheses are the file sizes. For example, the top-left image in Figure 11.1 is 15K, and the top-right image is 3K.
If you examine these images closely (you can look at them in color at (http://www.mcp.com/sams/books/235-8/ch06/compress.htm), you'll probably decide that 50-percent JPEG compression provides a good compromise of quality and size for the COMPLEXITY image. The SIMPLICITY image would both look and compress best as a 16-color GIF.
Figure 11.1. Simple images usually look best and load fastest as 16-color GIF files, while 50-percent JPEG compression is good for most complex graphics.
To estimate how long it will typically take for your images to download, you can assume that a standard 28.8Kbps modem with a good connection to a Net site can pull about 2KB per second on average. If you were surfing the Net, would you rather wait nearly half a minute to see this image in its full glory, or watch it pop onto your screen at 75-percent quality in less than six seconds?
Remember that many people are still accessing the Net through 14.4Kbps or slower modems. As a general rule, any Web page that includes more than 50KB worth of graphics should be accessed only from another, less graphics-intensive page. Links to the graphics-intensive page should warn readers so they can turn automatic graphics downloading off if they are using a slow dial-up modem connection.
Because text moves over the Internet much faster than graphics, most Web browsers will display the text on a page before the images. This gives people something to read while they're waiting to see the pictures, which makes the whole page seem to come up much faster.
You can make sure that everything on your page appears as quickly as possible and in the right places by explicitly stating the width and height of each image. That way, a Web browser can leave the right amount of space for that image as it lays out the page and come back to get the actual image file later.
For each image on your page, use Paint Shop Pro or another graphics program to find out the exact width and height in pixels. (In Paint Shop Pro, this information appears at the bottom-right corner of the main window when you move the mouse over any part of an image.) Then include those dimensions in the <IMG> tag like this:
<IMG SRC="myimage.gif" WIDTH=200 HEIGHT=100>
Time Saver: The width and height you specify for an image don't have to match the actual width and height of the image. The Web browser program will try to squish or stretch the image to whatever size you specify. This usually makes images look very ugly, but there is one excellent use for it: You can save a very small, totally transparent image and use it as any size "spacer" by specifying the width and height of the blank region you want to create on your page.
You can also speed things up by providing a small image file to be displayed while someone is waiting for a full-sized image file to download.
Put the name of the smaller file after the word LOWSRC in the same image tag as the full-sized SRC image:
<IMG SRC="bigfile.gif" LOWSRC="tinyfile.jpg">
What happens here is that the Web browser makes its first pass through your document, and when it sees your LOWSRC tag, it loads that (presumably smaller) image first. Then it makes a second pass through your document and loads the main image.
Though this attribute was originally designed with the intention that the LOWSRC image would be a low-resolution or highly compressed version of the SRC image, you can also use two entirely different images to get a two-frame animation effect.
Figure 11.2 is an HTML page that uses the WIDTH, HEIGHT, and LOWSRC attributes in an <IMG> tag. Figure 11.3 shows the LOWSRC and SRC images. The LOWSRC image is only two colors and contains less detail, so its GIF file is only 3KB and will load in less than 2 seconds through a 28.8Kbps modem. The SRC image file, with 256 colors and lots of detail, is 35KB--taking about ten times as long to download.
Figure
11.2. Always include the width and height
of all images.
Use LOWSRC to include a small image to display while a large image loads.
Figure 11.3. Though these two images are the same width and height, the left image compresses into a much smaller GIF file.
Figures 11.4 through 11.7 show the page from Figure 11.2 as it will look to someone viewing it on the Internet. It appears in four stages: 0-2 seconds (Figure 11.4):
The text appears with a small icon and rectangle as a placeholder for the image. If I hadn't included WIDTH and HEIGHT attributes in the <IMG> tag, the text would be in the wrong place at first and would then jump over suddenly, making it hard to read.
2-4 seconds (Figure 11.5):
The LOWSRC image appears. Because I saved it as an interlaced GIF image (see Chapter 10), it fades in gradually over the course of a couple seconds.
4-20 seconds (Figure 11.6):
The SRC image replaces the LOWSRC image. I didn't save the SRC image as an interlaced GIF, because I wanted it to "wipe out" the LOWSRC image in a single pass.
About 20 seconds (Figure 11.7):
The page is complete. Because most people will have just finished reading the text
at this time, they won't feel like they had to wait at all!
Just A Minute: If someone comes back to a page more than once in the same day, the Web browser will usually only show the LOWSRC image the first time. After that, it will be able to quickly pull the SRC image out of its memory.
Figure
11.4. When WIDTH and HEIGHT
attributes are included in an <IMG> tag, the browser draws a rectangular
placeholder for an image before loading it.
Figure
11.5. Next, the LOWSRC image
is displayed (if one was specified).
Figure 11.6. The SRC image gradually replaces the LOWSRC image as it downloads.
Figure 11.7. If the page is loaded again by the same person a little while later, they won't see the LOWSRC image at all.
The latter page also uses LOWSRC images for a groovy effect while loading.
This chapter helped you choose the number of colors and compression level of images so they load fast and still look good. You also learned how to make sure people always have text or a preview image to look at while waiting for the larger images on your page.
Table 11.1 summarizes the tags and attributes discussed in this chapter.
Table 11.1. HTML tags and attributes covered in Chapter 11.
| Tag | Attribute | Function |
| <IMG> |
|
Inserts an inline image into the document. |
|
|
SRC="..." | The address of the image. |
|
|
WIDTH="..." | The width, in pixels, of the image. If WIDTH is not the actual width, the image is scaled to fit. |
|
|
HEIGHT="..." | The height, in pixels, of the image. If HEIGHT is not the actual height, the image is scaled to fit. |
|
|
LOWSRC="..." | The path or URL of an image that will be loaded first, before the image specified in SRC. The value of LOWSRC is usually a smaller or lower resolution version of the actual image. |
