• Balancing Image File Size and Quality
  • Figure 11.1.
• Specifying Image Width and Height
• Providing a Preview Image
  • Figure 11.2.
  • Figure 11.3.
  • Figure 11.4.
  • Figure 11.5.
  • Figure 11.6.
  • Figure 11.7.
• Summary
• Q&A
• Quiz
  • Questions
  • Answers
• Activities

Chapter 11

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.

Balancing Image File Size and Quality

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.

Specifying Image Width and Height

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.

---

Providing a Preview Image

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.

Summary

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.

Q&A

Q This may be a dumb question, but how do I tell if my image is "complex" (suitable for JPEG compression) or "simple" (suitable for GIF compression)?

A Try reducing the number of colors to 16. If the image still looks fine, it's probably best to use GIF compression. If it looks terrible with so few colors, try saving it both as a 50-percent JPEG and a 256-color GIF. Then compare the file sizes to see which one is smaller.

Q My 16-color GIF image looks great in Paint Shop Pro, but lousy in Netscape Navigator. Did I do something wrong?

A Netscape Navigator usually uses a different method for mixing the colors of 16-color images than it does for 256-color images, which can sometimes make 16-color graphics look really bad. Here's a cheap solution: In Paint Shop Pro, reduce the number of colors in your image to 16, then increase the number of colors to 256 before you save it as a GIF. The image file will still be as small as a 16-color GIF, but Netscape Navigator will use the 256-color dithering method for displaying it. That often makes it look a lot better.

Q How do I make a "smaller" copy of an image for use with the LOWSRC tag?

A There are three easy ways: One is to save the image as a JPEG file with very high
compression. Another is to reduce the number of colors to 16 (or even 2), and save the file as a GIF. The third way is to resize the image to a lower resolution (say, 50x20 instead of 200x80). The Web browser will "stretch" the small LOWSRC image to fit in the same space as the big SRC image, as long as you include WIDTH=200 HEIGHT=80 in the <IMG> tag.
See Chapter 10 for detailed instructions on how to do all three of these things in Paint Shop Pro.

Quiz Questions

1. What compression level setting is generally best for most JPEG images?

2. How could you display a picture of a wolf briefly, then replace it with a picture of a man (without using GIF animation)?

3. What four attributes should you always include in every <IMG> tag as a matter of habit?

Answers

1. 50-percent compression.

2. <IMG SRC="man.jpg" LOWSRC="wolf.jpg">

3. SRC, ALT, WIDTH, and HEIGHT. For example:

<IMG SRC="fred.jpg" ALT="Fat Fred" WIDTH=300 HEIGHT=100>

Activities

• For large images (any graphics file over 15KB), it's worth a little experimentation to find the exact compression ratio or number of colors that gives you the minimum acceptable quality. Save it at all the settings shown in Figure 11.1, and compare them in Netscape Navigator or Microsoft Internet Explorer.
• Black-and-white images make the smallest files, so many sites use a 2-color version of a color graphic as the LOWSRC image. If simply reducing the colors of an image doesn't yield a good LOWSRC image, try using Paint Shop Pro's Emboss or Trace Contour effects first.