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.
Nice tips just the way we want them – easy to understand and implement. Thanks, Patrick.
The argument I also hear is whether to use gif or JPEG format files. Whilst I agree with the use of thumbnails, if your site is not graphic heavy and you link to external graphic sources then the height width attributes come in handy.
I have always been under the impression that if you set the width, the height would auto size.
Nice article
les
the radical blogger
I found out that the ONLY reason why my website didn’t have a 100% SEO score was because I didn’t set the dimension attributes for some images.
Your site provided the info I needed with pin-point accuracy! Great job!
Thanks a lot.
Wayne
I have a situation where i am designing a user friendly website for my sister-in-law who is a photographer and storage size is important. She plans to store a lot of photo’s on her web server and we want to keep it at a budget. I know that it is good sense to make tile images for display. My question is can i use my style sheet to force the larger photo into a smaller hole so that i do not have to store the tile image and the original image on the server?
Soft Gage, no you can’t do that. The css property background-stretch is not implemented by any or many browsers today, and you’d need that to do the resizing with your stylesheet.
Also for someone who didn’t want to look at every single image (espcially if your server doesn’t send appropriate headers for caching) it will make the experience verrrrry slooooowwwww, which flies in the face of the whole point of this article.
If you want to learn fancy CSS tricks then better paces to ask about them are places like webmasterworld.com …. If I sound mean, sorry I don’t mean to. In my opinion your question is relevant and intelligent, which is why I took the liberty of answering it.
@Websiteoptimization: What about the argument that width and height attributes are purely presentational and thus only belong as properties in the stylesheet? Do you think I could set the size of the image placeholders in CSS to prevent a reflow without violating the semantic beauty of my document?
… I’m going off to try it out, right now!