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
Get My Best Internet Marketing and Entrepreneurship Tips
- Don't worry, I only send out emails once or twice a month.
- But when I do, it's because I have something valuable to share!
- You don't want to miss those, and it's completely free!
36 Responses to “Speed Up Your Site: Use the height and width tags”
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?
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.
Wow, great tip. I never actually knew what the point was in doing that, it makes sense now. Thanks!
hmm.. I don’t know anything about this.. great tip! Will check and see whether it works or not then.. 🙂
I’ve seen this tip 5 times, and not once has the person told me why I needed to add the height and width.
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!
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.
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.
Solid tip. Also standards compliant.
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.
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).
very very nice infoamations thansk realy
Great information. Helped speed up my blog’s load time.
In my opinion..those are a lot of beutiful tips. Nice!
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.
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.
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?
Comments are closed.