Most web pages use images to spice up their look. However, not all web pages use Many images that we've encountered on our journey through cyberspace have no dimensions attributes specified, like this: This forces the browser to find the size of this image before rendering the rest of the page. Some images we've encountered have only one dimension specified, like this: This isn't enough information for browsers to render your page in one pass. To ensure maximum rendering speed make sure that you always specify both the actual width and height of all images and other objects, like this: Even better, include a functional description in your ALT attributes for screen readers. This technique ensures that your pages will not dance like Elaine on Seinfeld, and display quickly. One common technique used on the Web is to specify a smaller width and height for larger images to create a pseudo-thumbnail. This defeats the purpose of thumbnails by forcing a large peg into a small hole. The entire image must still download, but its dimensions will be distorted to the smaller size. To avoid wasting bandwidth resize the image to thumbnail size (around 80 to 125 pixels) use the actual size of the smaller thumbnail in the initial image, and link to the larger image from the thumbnail. This may all sound obvious to experienced developers, but for new authors it is a good practice to follow.
Including the width and height in images and embedded objects ensures fast page rendering by giving browsers the size information they need. Object dimensions help the browser avoid a second pass to layout your page. Using the actual dimensions for thumbnails avoids wasted bandwidth and slow downloads. Andy King is the founder of five developer-related sites, and the author of Speed Up Your Site: Web Site Optimization (http://www.speedupyoursite.com) from New Riders Publishing. He publishes the monthly Bandwidth Report, the weekly Optimization Week, the weekly Speed Tweak of the Week, and the semiweekly WebReference Update.width
and height
to size their graphics and objects. Specifying the width and height of all embedded objects like images and applets allows your user's browser to render your page without waiting for images to download and try on for size. Width != Height
<img src="logo.gif" alt="logo">
<img src="logo.gif" width="125" alt="logo">
<img src="logo.gif" width="125" height="60" alt="logo">
<img src="logo.gif" width="125" height="60" alt="gizmo.com home">
Use Actual Image Size
Conclusion
About the Author
Further Reading
By website optimization on 7 Sep 2004 AM