Design Your Website For Speed - Use The Height And Width Tags

If you want to improve your visitors overall experience of your website, you need to look into improving the speed of the server response time for your clients and visitors.

Your visitors may not realize the extra work you have done, but they will appreciate it.

Give The Size Of Your Images

When you decide to design your website for speed, one of the best ways to do this is to properly use the height and width tags with your images.

This is an important item that webmasters tend to overlook.

Usually a webmaster will make sure:

• to use the same image multiple times,
• to not have an identical image with different names.

But seldom will a webmaster look at the tags for the size of the images.

Also Need Height And Width Tags On Images

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=”cow” height=”120″ width=”360″ src=”images/cow.jpg” alt=”Picture of a Cow” />

When the height and width tags are included the browser will automatically know the size of the image.

Since the size of the image is known there is a space allocated for the image as the rest of the page loads.

Annoying Tell Tale Signs If These Are Missing

You can tell a page that has not defined image size because as it loads the page seems to leap about and oddly make space.

For a reader that has begun to read text this is especially annoying.

Text that was at the top center may suddenly be middle center, and when they find their place again the text is middle right.

As stated, other than helping on load time this is just a nice thing to do for your reader.

Help At Hand

There are some software tools that will automatically add the size elements to images, and they are very helpful.

Reduce Image Size Proportionally

If a webmaster does not know the exact size of an image being used and needs to increase or decrease the size it is easy to change the size proportionally.

My cow image given above can easily be reduced in half:

• <img id=”cow” height=”60″ width=”180″ src=”images/cow.jpg” alt=”Picture of a Cow” />

Or by a third:

• <img id=”cow” height=”40″ width=”120″ src=”images/cow.jpg” alt=”Picture of a Cow” />

Speed And Better Loading

Properly using the height and width tags with your images can offer you speed and clarity for your clients.

Add height and width tags to all of your images. All of your website visitors will be happy you did.

This articles is part of the Design Your Website For Speed series.

Speed is an important consideration for international internet marketing. The other articles in this series are:

Design Your Website For Speed – Use A Forward Slash On Your Links

Design Your Website For Speed - Reduce the HTTP Requests

Design Your Website For Speed - Optimize Your Cascading Style Sheets