Speed Up Your Site: Use the height and width tags

By Daniel Scocco

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:

  1. Optimize Images
  2. Image Formats
  3. Optimze Your CSS
  4. Use a Slash on Your Links
  5. Use the Height and Width Tags
  6. Reduce the HTTP Requests



Share

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

  • Eli

    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

    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

    Wow, great tip. I never actually knew what the point was in doing that, it makes sense now. Thanks!

  • menghua

    hmm.. I don’t know anything about this.. great tip! Will check and see whether it works or not then.. 🙂

  • Brian

    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

    I tried this method but the loading is still the same. I guess it’s the javascript ads then… any solution for that? 🙂

  • Alex

    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

    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

    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

    Solid tip. Also standards compliant.

  • Andrei Ancuta

    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

    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

    very very nice infoamations thansk realy

  • Sachin

    Great information. Helped speed up my blog’s load time.

  • mad

    In my opinion..those are a lot of beutiful tips. Nice!

  • Bang Kritikus

    use alt tag for images

  • Medical Tourism In Costa Rica

    There in the code we have put boarder=0,

  • Prashanth Kumar Ganathe

    Great tip, Daniel Scocco is it a good idea to define the width and height in css(for each image class) or putting this tag for each image control

  • Babaji M P

    WordPress by default writes the height widht tags.

    Now,

    I want it to include only the width tag by default.

    How to do that ???

    Reason:
    I’m using .htaccess to prevent hotlinking. The warning image file is of 400×200 px. But the images on site are of different dimensions. When the images are displayed on other’s site, the warning images are stretched making it hard to view the warning.

  • Amsterdam Zuid

    I’m using Joomla 1.5.15 as my CMS system and it uses a lot of different css files. Any tips on how to merge those css files to one css file in joomla?
    Thanks

Comments are closed.