Making Pages Display Quickly
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.
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>
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
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):
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.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.
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.