Other Neat Tricks with Images

Now that you've learned about inline images, images as links, and how to wrap text around images, you know what most people do with images on web pages. But you can play with a few newer tricks as well.

All the attributes in this section were originally Netscape extensions. They were later incorporated into HTML 3.2, but most have been deprecated in its successor, HTML 4.01.

Image Dimensions and Scaling

Two attributes of the <img> tag, height and width, specify the height and width of the image in pixels. Both became part of the HTML 3.2 specification, but they're deprecated in HTML 4.01 in favor of style sheets.

If you use the actual height and width of the image in these attributes (which you find by opening the image file directly in your browser), some older browsers will load and display your web pages much faster than if you don't include the values.

Why? Old browsers (Netscape 4 and Internet Explorer 3) couldn't alter the layout of pages as they were being loaded, so the size of every element on the page had to be determined before the page could be displayed. These days, browsers can resize elements on the fly so users don't have to wait for images to download before the page can be displayed. Even so, providing the proper height and width can help your pages render a bit more smoothly, so you should still include them if possible.

Tip

Not only will browsers usually tell you the size of any image you open (in the title bar of the browser window). Just about any application that lets you view or edit image files will display the dimensions of an image as well.

If the values for width and height are different from the actual width and height of the image, your browser will resize the image to fit those dimensions. Because smaller images take up less disk space than larger images and therefore take less time to transfer over the network, you can just create a smaller version and then scale it to the dimensions you want on your web page. The downside of this technique is that the imagescaling algorithms built into browsers are not always the best. If you use the height and width attributes to change the size of an image, be prepared for it to look pretty bad, especially if the aspect ratio is not preserved (in other words, you take a 100-by-100 pixel image and expand it into a 200-by-400 pixel image).

Caution

Don't perform reverse scalingcreating a large image and then using width and height to scale it down. Smaller file sizes are better because they take less time to load. If you're going to display a small image, make it smaller to begin with.

More About Image Borders

You learned about the border attribute of the <img> tag as part of the section on links, where setting border to a number or to 0 determined the width of the image border (or hid it entirely).

By default, images that aren't inside links don't have borders. However, you can use the border attribute to include a border around any image, as follows:

<p><img src="/books/2/631/1/html/2/eggplant.gif" alt="Eggplant" align="left" border="5" width="102" height="178" /> This is an eggplant. We intend to stay a good ways away from it, because we really don't like eggplant very much.</p>

Figure 7.28 shows an image with a border around it.

Figure 7.28. An image border.