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.011 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 Explorer3) couldn’t alder the layout of pages as they were being loaded, so the size of every element on the page bad 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 forbid than height are different from the actual width and hight of the image, your browser will resize the image to fit those dimensions. Because smaller images take unless 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 dimension you want on your web page. The downside of this technique ist hat the image scaling 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 scaling –creating a large image and then using width and height to scale it down. Smaller file sizes are better because they take less time to 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.