Speed Up Your Site: Use the height and width tags

This is a very important factor that many people (including myself until some time ago) tend to overlook. When you use images or tables on your pages you should always include the height and width tags. If the browser does not see those tags it will need to figure the size of the image, then load the image and then load the rest of the page. Here is an example of code containing those tags:

<img id="moon" height="200" width="450" src="http://www.domain.com/moon.png" alt="moon image" />

When the height and width tags are included the browser will automatically know the size of the image. As a consequence it will be able to hold a place for the image and load the rest of the page contemporaneously. Apart from the improvement on the load time of the page this method is also more user friendly since the visitor can start reading the text or other information while the image is being downloaded.

Speed Up Your Site Series:

Daniel Scocco on March 28, 2007 Subscribe to our RSS Feed

Got the Daily Blog Tips Newsletter?

Tips and tricks to improve your site
The latest trends and opportunities
Useful online tools
It's free!

Bookmark

33 Responses to “Speed Up Your Site: Use the height and width tags”

Eli on March 28th, 2007 5:51 am

I didn’t realize .. I guess I’ll have to look into doing that to every one of my images now

It’s a fair it of extra hard work, don’t you think? And do you think it’s worth it?
Daniel on March 28th, 2007 6:19 am

Eli, I think it is worth if you have older posts with large images. I needed to look into my archives as well and add the height and width tags to posts that had large images, the ones with small ones I left untouched.

Once you fix the major ones just remember to add the tags from now on and should be fine since the extra load usually happens on the Homepage where more than one image are displayed at the same time.
egon on March 28th, 2007 6:21 am

Wow, great tip. I never actually knew what the point was in doing that, it makes sense now. Thanks!
menghua on March 28th, 2007 7:28 am

hmm.. I don’t know anything about this.. great tip! Will check and see whether it works or not then..
Brian on March 28th, 2007 8:08 am

I’ve seen this tip 5 times, and not once has the person told me why I needed to add the height and width.

Thanks.
menghua on March 28th, 2007 8:44 am

I tried this method but the loading is still the same. I guess it’s the javascript ads then… any solution for that?
Alex on March 28th, 2007 8:44 am

Hi Daniel, one of the questions you’re asking contenders in your Bloggers Face-Off is what they think of Alexa. I started a poll on my blog about the subject and I would be happy if you contribute with a vote. Thanks for your time and sorry for the off-topic comment!
Mark Alves on March 28th, 2007 9:55 am

As a corollary to Daniel’s rule, always use the actual dimensions of the image rather than changing the on-page attributes to resize the photo. Even though browsers can resize an image for you, quality will suffer and a larger file than necessary will be downloaded. If you wanted an image half the size of the “moon” example above, then upload a new image rather than setting the attributes to 100 x 225.
Daniel on March 28th, 2007 9:57 am

menghua, one way to improve javascripts, if you use them on all pages, is to have a single script instead of multiple ones on every page.

This method is for images and tables, and if you check a large image you will see that you can notice the effect even without a website speed meter.

Alex, no problems I will check your poll right now.
Dawud Miracle on March 29th, 2007 6:43 am

Solid tip. Also standards compliant.
Andrei Ancuta on May 10th, 2007 12:03 am

My site pages are generated dynamic from php and the image sizes is different for every product. Please tell me witch is the best solution for the img tag width and high:

1. Leave the img tag withouth width and high.
2. Use getimagesize function to obtain sizes and add them to img tag.
3. Use maxwidth and maxheigh from css.
Daniel on May 18th, 2007 3:32 am

Andrei, I would go with option number 2. This will certainly “render” the page faster for the user. (even if the actual speed might be similar, the image spots will be fixed, so the reader will be able to see the content faster).
hid kits on August 20th, 2007 8:17 pm

very very nice infoamations thansk realy
Sachin on October 15th, 2007 8:12 pm

Great information. Helped speed up my blog’s load time.
mad on August 13th, 2008 1:35 pm

In my opinion..those are a lot of beutiful tips. Nice!
Bang Kritikus on January 28th, 2009 8:43 am

use alt tag for images
Medical Tourism In Costa Rica on April 29th, 2009 5:28 am

There in the code we have put boarder=0,