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.
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
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
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.
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.
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
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
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
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.
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.
||Inserts an inline image into the
||The address of the image.
||The width, in pixels, of the image. If
WIDTH is not the actual width, the image is scaled to fit.
||The height, in pixels, of the image.
If HEIGHT is not the actual height, the image is scaled to fit.
||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 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
- 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?
- 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>
- 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.