Retrieving Full-Size Images after Clicking on Thumbnails

The Tips in this chapter have centered on inserting graphics images on a Web page. Moreover, you
learned that images you place on a Web page should have small file sizes, so that the Web browser
can download and display the images quickly. To get the small image file size you need, you normally
save the image using a compression scheme such as the GIF, JPEG, or PNG file format. Although
these formats reduce the file size of graphics images, they do so by sacrificing some image quality.
For example, the JPEG format can compress a graphic file to 1/100th of the file’s original size.

Although the JPEG compressed image may look good in the browser’s application window, the
picture will often appear grainy when printed. Because the JPEG format reduces file size by removing
color from the original image, the JPEG-formatted image may not contain enough color information
to print correctly. Moreover, you often save Web graphics at resolution of 72 ppi to match the resolution
of a typical computer monitor.

However, printers require higher resolutions (typically 300 dpi [dots
per inch] or higher). For these two reasons, concentrate on making images on a Web page look as
good as possible when displayed on the visitor’s screen, and provide visitors with a second image
(at a higher resolution) that they can print on paper.

Say, for example, that you want to provide visitors to your Web site the ability to download and
print a graphics image. You could insert the full-size image on the Web page, and instruct the visitors
to right-click the graphic and select Copy Image from the pop-up menu.

However, inserting the fullsize,
high-resolution image on a Web page means that the Web browser will have to download a picture
with a huge file size, which will take a long time—especially for those visitors that just want to view
the page without downloading and printing the picture.

A more practical method would be to create thumbnails (that is, small, low-resolution images), and
convert the images into links, an example of which is shown in Figure 6-30. After a visitor clicks a
thumbnail, the hyperlink’s href attribute tells the Web browser to download the graphics image file
to the visitor’s computer.

To create a thumbnail of a full-size image, open the image in an image-editing program
and create a low-resolution copy of the original image. Say, for example, that you have
a series of full-size pictures of landscapes, and you want to let visitors download and print these images.

One at a time, open the image files (named land1.tif and land2.tif, in this example) in an image-editing
program. Create and save a low-resolution copy of the image to another file (landlw1.jpg and landlw2.jpg,
in this example). Then, place the low-resolution images (that is, the thumbnails) on the Web page as
shown by the tags in the following HTML:

Click on a graphic image to
download a full-size version


border="0"
width="50" height="25">



border="0"
width="50" height="25">