Size Images with Width and Height Attributes

Most web pages use images to spice up their look. However, not all web pages use 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

Many images that we've encountered on our journey through cyberspace have no dimensions attributes specified, like this:

<img src="logo.gif" alt="logo">

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:

<img src="logo.gif" width="125" alt="logo">

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:

<img src="logo.gif" width="125" height="60" alt="logo">

Even better, include a functional description in your ALT attributes for screen readers.

<img src="logo.gif" width="125" height="60" alt="gizmo.com home">

This technique ensures that your pages will not dance like Elaine on Seinfeld, and display quickly.

Use Actual Image Size

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.

Conclusion

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.

About the Author

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.

Further Reading

Minimize HTTP Requests

By combining external files and embedding CSS and JavaScript within your HTML you can minimize the number of HTTP requests required to render your page.

Optimizing Web Graphics

Chapter 12 summary of Speed Up Your Site shows how to optimize your web-bound graphics for maximum speed.

By website optimization on 7 Sep 2004 AM