Why Specify Height & Width in Image Statements?

The primary reason for specifying both height and width (in pixels) in an image source statement <img src="..."> is to provide the browser with the exact size that will be necessary to display the image and allow the page to continue to load even as the image is being downloaded, i.e. all the remaining html text will continue to load even though the image may not have finished downloading.  This results in quicker page loading without the delays that are observed in loading a long page with many images that have not used height and width specifications, thus allowing the reader to continue reading the page while the images are still downloading.  Example:

<img width=256 height=340 src="http://yoururl.com/BookCover.jpg">

Another tip that will make the use of this additional HTML easier, is to add the width and height to the image file name.  For example, instead of saving an image file that you want to call BookJacket in a gif format with a width of 274 and a height of 360 with the filename of BookJacket.gif save it as BookJacket274x360.gif.  These parameters are readily easy to obtain from browsers and graphics viewing or editing software.  In Netscape, right clicking on an image and using View Info or View Image will yield these image parameters or in I.E. right clicking and selecting Properties will also yield the same.  The next time you use this file you will already have the dimensions available to enter into the image source statement.  Specifying just one of the two size parameters does not facilitate continued page loading while the image is downloading.  It is important to specify both as shown below.  Example:

<img width=274 height=360 src="http://yoururl.com/BookJacket274x360.gif">

A note on image reduction:  although it is not the most efficient method of image reduction for several reasons, many use HTML width and/or height specifications to reduce the displayed size of an image by specifying either a smaller height or width.  To take advantage of quicker page loading both width and height should be used.  Example for a 50% displayed size reduction of BookJacket274x360.gif:
<img width=137 height=180 src="http://yoururl.com/BookJacket274x360.gif">

Two disadvantages of HTML image reduction are: a). image resolution and clarity which are best obtained in graphics software reduction, and b). file size (in bytes) and download time remain the same even though the displayed image size is smaller.




Honesty.com Counters
Bookmark ME
Other Stuff