XHTML

Images

Height, Width, and Alt Attributes

When you load an image into a Web page, you should specify the height and width (in pixels) for each, plus give alternate information about the image for people who have images turned off, or are using non-graphical browsers.

You may be wondering why you should set these attributes, especially if you have seen so many HTML pages in the past that never used them. The answer is quite simple: those were poorly designed pages.

When a browser renders a page, it starts at the top and renders sections of the page sequentially. Images take far longer than text to download. If you specify the height and the width of an image, the browser will reserve that space and keep rendering the other elements. In other words, your page loads much faster because the browser can keep working on the rest of the page while the graphics load. Typically, browsers can do four things at the same time, so letting the browser keep working by setting the height and width attributes is a good thing.

Too many pages are slower than they should be for many reasons. Each image can have up to a two second hit in overhead just talking to the server.

The alt attribute is the text that will be displayed while an image is loading. If for some reason the image does not load, you will be looking at the alt text.

So, does the alternate text make a page load any faster? No, but it will let the user use the page much faster (which, in essence, is the same thing). While the graphics are loading, the alternate text will be displayed so the user can still make sense of the page and get an idea of graphical navigation before it's fully loaded. Also, image links with alt text can often be used even if the graphics aren't fully loaded.

It is good Web design to always provide text links somewhere on your page in case people are viewing your pages with images off.

Also, since so many people use so many graphics, the search engines may have a hard time determining what a page is about, especially if the headings are not used properly. Some of the search engines look at each image's ALT attribute to help determine what the picture is about. Always make your alt attributes relevant to the image.

Many validation services will fail a page if the images do not have the alt attribute specified. If you are using round graphical bullets for a list of items, use the asterisk (*) as the alt text. If images are turned off, the effect is still the same.

Some browsers use the alt attribute like the title attribute. Many people specify both the alt attribute and the title attribute with the same or similar information, so that as many users as possible can see it. This is a perfect way to add value to your page. The alt text should never be more than 50 characters, as many browsers will display only a limited number of characters.

You can set the height and width attributes to values other than the proper size of the image. Take a look at these examples:

  1. <img
  2.      src="../images/graphicsphoto.jpg"
  3.      alt="Apple PowerBook G4 Titanium"
  4.      width="480"
  5.      height="25"
  6.      />

Apple PowerBook G4 Titanium

Why would you want to distort a picture? How about if you had an image that was your favorite colour of red that was really small (like a single pixel). You could load it really fast, and stretch it out, center it, and make a divider for parts of your page. The same could be done with a 3D image of a ball, it could be stretched out to make a nice bar. Play around and see what you like.

<img src="../images/graphicsphoto.jpg" alt="Apple PowerBook G4 Titanium" width="50" height="50" title="Apple PowerBook G4 Titanium" /> Apple PowerBook G4 Titanium

Even better, you could use a single pixel gif image, set the colour to transparent (so it is invisible), and use it for positioning elements in tables and such. Until CSS came along, that was what most people had to do to create the layout they wanted (sounds archaic, doesn't it?)

All experienced Web designers use these attributes regularly.

By putting larger, non-important images near the bottom of your page, the user can start reading the content right away. By the time they get to the bottom, the image is there waiting for them. They don't have to watch it load.

Apple PowerBook G4 Titanium

Here is that same image at it's proper size. <img src="../images/graphicsphoto.jpg" alt="Apple PowerBook G4 Titanium" width="480" height="320" />

Here is another tip to improve the speed of your pages: re-use your images as much as possible. When you use the same images over and over, they are kept in the browser's cache and are not fetched from the Internet each time. This is done all the time.


XHTML - TOC - Introduction - Books -
Images Lectures - Links - Questions - Quiz -
1 - [ 2 ] - 3 - 4 - 5 - 6 - 7 -

 
My Account - Logout - Home/Outlines - Blogs - Books - Contact Us - Support -
XHTML - TOC - Introduction - Books -
Images Lectures - Links - Questions - Quiz -
1 - [ 2 ] - 3 - 4 - 5 - 6 - 7 -