The Importance of Optimizing IMG (Image) Tags

This article was written by Joel Rosenstein,Director, OppoSite Software

These days, almost every page on the Web contains at least some in-line (embedded) graphic images. In HTML, this is usually accomplished with the <IMG...> tag. (I say usually because there are other ways, such as with Java or proprietary methods using plug-ins.)

The IMG tag has only one required attribute, SRC, which specifies the filename of the image to display. There are, however, a number of additional attributes that when used properly can offer viewers of your Web pages the following benefits:

1. pages that appear to load into the browser much faster (the most important one)

2. textual descriptions of loaded graphics

3. the ability to display pages sufficiently well in non-graphical browsing environments, such as text-only browsers (pretty rare these days) and when the browser option to display graphics has been turned off (used by many modem surfers to speed browsing by not loading the graphics)

FASTER PAGE LOADING

When a Web browser such as Netscape Navigator or Microsoft Internet Explorer accesses a Web page containing graphics, it must figure out how to lay out the page based on the included graphics (among other things) in order to display it properly. This means that it has to go ahead and load each graphic to see exactly what size it is so that it can calculate the proper layout.

Older versions of the previously-mentioned browsers as well as current versions of many others accomplish this by loading all of the images to determine their dimensions (width and height, in pixels) and then displaying the page. The result of this is that it seems to take a long time for the Web page to load because before the browser can display anything it has to load all the graphics included in the page.

On some pages, however, you will notice an improved way of loading a Web page: you first see the text contents of the page displayed rather quickly, wrapped around empty spaces (called place-holders).

Then, the images start to load, filling in the place-holders. Why is this important? The person viewing the page can start reading the page very quickly and, if so desired wishes, can wait for the graphics to load. This is usually much more convenient.

Newer browser versions use a different approach to try limit this problem, but in doing so they introduce another one. They place standard-sized little boxes as place-holders so that they can quickly display the text. The problem is that as they begin to load the graphics, the entire page jumps and jerks around in order to accommodate the different-sized images. This is a rather annoying phenomenon if you're trying to read the page - you end up losing your place and having to scroll around. The result is that you want to wait anyway for the browser to load the whole page and then to start reading the page. Which returns us to the first problem I mentioned - pages seem to take longer to load.

USING WIDTH AND HEIGHT ATTRIBUTES OF IMG TAGS

So how do you make your Web pages so that they load quickly with the nice, properly-sized image place-holders? The trick is in using the optional WIDTH and HEIGHT attributes of the IMG tag. Including these in an IMG tag informs the browser *before* it loads the graphics exactly what size each one will be. An example of such an IMG tag is:

I would venture to say that all professionally created Web pages contain these optional attributes for every IMG tag in the Website.

And you should too, if you want to create the best Web pages that you can.

THE DIFFICULTIES WITH USING WIDTH AND HEIGHT ATTRIBUTES

OK, so you understand what needs to be done. But actually doing it can be difficult. In the "old days" of HTML development, Web page designers had to manually type in each and every WIDTH and HEIGHT. As you can imagine, this is terribly time-consuming and error-prone.

These days, many better HTML editors and Website publishers automatically insert the correct WIDTH and HEIGHT attributes for every IMG tag. While obviously saving Web page creators lots of time, this approach introduced a new problem: mismatched WIDTH and HEIGHT attributes for in-line images. Why? Because graphics are often edited, improved, and replaced.

What happens is that the new image is often of a slightly (or very) different size. The result is that in order to fill the exact amount of space in the Web page as specified by the WIDTH and HEIGHT attributes, the Web browser will either compress or expand the image as required. This almost always results in a distorted image that does not appear in the Web page as was intended. Most HTML editors do not have a facility for updating all the IMG tags for graphics, after they've been added to the page.

THE EASY WAY

There is a simple solution that guarantees that every IMG tag in your Website includes these optional parameters, whether or not your HTML editor inserts them when adding an image to a Web page.

It is called HTML Image Scanner, and it is an exceptionally useful and easy-to-use Windows-based tool with a single purpose: to perfect every image in a Website - containing any number of pages - with almost no effort on your part.

With one click, it will scan every page in a Website and insert (or update) the correct WIDTH and HEIGHT attributes for each in-line GIF and JPEG image. Flexible options allow you to specify automatic mode, manual confirmation of each change, and a number of in-between choices.

Whenever you have made any changes to your Website or the images contained in it, you can simply let HTML Image Scanner scan your site and make sure that every IMG tag is perfect!

THERE'S MORE! THE ALT ATTRIBUTE

There is another optional attribute of the IMG tag that is very worth mentioning: ALT (short for ALTernate). You use this attribute to specify some text to be associated with each graphic. For example:

Different browsers use this text differently, but it is highly recommended to always include it. Text-only browsers use this text in place of pictures. When the user opts not to load images, this text is displayed in place-holders for the picture. Recent browsers, such as Internet Explorer 3 and Navigator 4 beta, also pop up this text when you pass your mouse over an image.

As with WIDTH and HEIGHT, it is difficult and time-consuming to specify a text caption for every picture in a Website.

HTML Image Scanner also provides a time-saving and convenient solution to this problem. While scanning a Website's IMG tags, the program can optionally allow you to enter an ALT text value for each picture, which it then inserts into the IMG tag itself.

It does this in a comfortable user interface that can display each picture for you so that you don't have to go dig it up to figure out what the filename refers to. Furthermore, it allows you to specify a caption once for a given picture and then automatically have it insert that text caption every time that same picture is used

anywhere else in the entire Website! This is particularly useful for recurring images such as logos and navigation buttons. And finally, it will optionally point out to you any inconsistencies in ALT tags for particular images in your Websites.

IN CONCLUSION

The optional IMG tag attributes WIDTH, HEIGHT, and ALT increase the quality of your Web pages, and make them more professional. If you do your HTML work in Windows, you can use HTML Image Scanner to make the insertion and maintenance of these optional attributes child's play.

HTML Image Scanner sells for $24.99 and is one of the eight indispensable HTML development utilities for Windows included in the HTML PowerTools suite.

Please visit http://www.opposite.com now to download a fully-functional 30-day trial of HTML PowerTools.

Even if you decide not to buy HTML Image Scanner (or the other tools in the suite), you can perfect all your Websites' IMG tags quickly, easily, and for free!

This article was written by Joel Rosenstein,
Director, OppoSite Software
jrose@opposite.com
http://www.opposite.com