Skip to main content.

Web Based Programming Tutorials

Homepage | Forum - Join the forum to discuss anything related to programming! | Programming Resources

Teach Yourself HTML 3.2 in 24 Hours

Teach Yourself HTML 3.2 in 24 Hours


Hour 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.

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.

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.


Coffee Break: When you have multiple graphics elements without WIDTH and HEIGHT attributes on a page, it can be especially disconcerting to watch it reshuffle elements while loading. To see the difference, compare the following two versions of the 24-Hour HTML Café page:

http://www.mcp.com/sams/books/235-8/cafe10.htm

http://www.mcp.com/sams/books/235-8/cafe11.htm

The latter page also uses LOWSRC images for a groovy effect while loading.

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.

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.

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