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:
- Optimize Images
- Image Formats
- Optimze Your CSS
- Use a Slash on Your Links
- Use the Height and Width Tags
- Reduce the HTTP Requests
36 Responses to “Speed Up Your Site: Use the height and width tags”
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?
Babaji M P
WordPress by default writes the height widht tags.
I want it to include only the width tag by default.
How to do that ???
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.
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
Medical Tourism In Costa Rica
There in the code we have put boarder=0,
use alt tag for images
In my opinion..those are a lot of beutiful tips. Nice!
Great information. Helped speed up my blog’s load time.
very very nice infoamations thansk realy
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).
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.
Solid tip. Also standards compliant.
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.
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.
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!
I’ve seen this tip 5 times, and not once has the person told me why I needed to add the height and width.
hmm.. I don’t know anything about this.. great tip! Will check and see whether it works or not then.. 🙂
Wow, great tip. I never actually knew what the point was in doing that, it makes sense now. Thanks!
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.
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?
Comments are closed.