1. Technology

IMG Tag Attributes

Learn How to Effectively Use the IMG Tag


The HTML IMG tag is often one of the first tags we learn when learning HTML. It allows you to add a dimension to your web pages beyond text, and, if you're an artist or photographer, to show off your skills. But there are several attributes that can be used on the IMG tag that many designers ignore or forget.

To add an image to your web page you would write:

<img src="url">

Required IMG Attributes

The only attribute you need to get an image to display on a web page is the SRC attribute. But if you validate an HTML4 document, it will be declared invalid unless you also have the ALT attribute.

In order to write valid XHTML and HTML4, the ALT attribute is also required. This attribute is used to provide non-visual browsers with text that describes the image. Browsers display the alternative text in different ways, some display it as a pop-up when you put your mouse over the image, others display it in properties when you right click on the image, and some don't display it at all.

You can use the alt text to give additional details about the image that are not relevant or important to the text of the web page. But remember that in screen readers and other text-only browsers, the text will be read inline with the rest of the text on the page. So it's a good idea to make sure it makes sense. For example, alt text that says “About Web Design and HTML” is better than “logo.”

In HTML5, the ALT attribute is not always required, because you can use a caption to add more description to it. You can also use the attribute ARIA-DESCRIBEDBY to indicate an ID that contains a full description. For example:

<img src="image.jpg" alt="My son" aria-describedby="#fig1desc">
<p id="fig1desc">This is a photograph of my son sitting on a slide at a local park.

Alt text is also not required if the image is purely decorative, such as a graphic at the top of a web page or icons. But if you’re not sure, include alt text just in case.

Recommended IMG Attributes

You should get into the habit of always using the WIDTH and HEIGHT attributes. And you should always use the real size and not resize your images with the browser.

These attributes speed up the rendering of the page because the browser can allocate space in the design for the image, and then continue downloading the rest of the content, rather than waiting for the entire image to download.

Other Useful IMG Attributes

The TITLE attribute is a global attribute that can be applied to any HTML element. And the TITLE attribute allows you to add extra information about the image.

Most browsers support the TITLE attribute, but they do it in different ways. Some will display the text as a popup while others display it in information screens when the user right-clicks on the image. You can use the TITLE attribute to write additional information about the image. But you shouldn't rely on this information being either hidden or visible. And you should most definitely not use this to hide keywords for search engines. This will just get your site banned.

These two attributes allow you to set client-side (USEMAP) and server-side (ISMAP) image maps to your images.

The LONGDESC attribute allows you to put a URL to a longer description of the image. This makes your images more accessible.

Deprecated and Obsolete IMG Attributes

There are also a number of attributes that are obsolete in HTML5 or deprecated in HTML4. This means that for best HTML you should find other solutions instead of using these attributes.

The BORDER attribute defines the width in pixels of any border around the image. It has been deprecated in favor of CSS in HTML4 and is obsolete in HTML5.

This ALIGN attribute allows you to place an image inside the text and have the text flow around it. You can align an image to the right or the left. It has been deprecated in favor of the float CSS property in HTML4 and is obsolete in HTML5.

The HSPACE and VSPACE attributes that add white space horizontally (HSPACE) and vertically (VSPACE). White space will be added to both sides of the graphic (top and bottom or left and right), so if you only need space on one side, you should use CSS. These attributes have been deprecated in HTML4 in favor of the margin CSS property, and they are obsolete in HTML5.

The LOWSRC attribute provides an alternative image when your image source is so large that it downloads extremely slowly. For example, you might have an image that is 500KB that you want to display on your web page, but 500KB would take a long time to download. So you create a much smaller copy of the image, perhaps in black and white or just extremely optimized, and put that in the LOWSRC attribute. The smaller image will download and display first, and then when the larger image appears it will replace the low source one.

The LOWSRC attribute was added to Netscape Navigator 2.0 to the IMG tag. It was part of DOM level 1 but was then removed from DOM level 2. Browser support has been sketchy for this attribute, although many sites claim that it's supported by all modern browsers. I have not been able to confirm support in any browser but Netscape. It is not deprecated in HTML4 or obsolete in HTML5 because it was never an official part of either specification.

Ultimately, you should avoid using this attribute and instead optimize your images so that they load quickly. Speed of page laoding is a critical part of good web design, and large images slow pages down enormously, even if you use the LOWSRC attribute.

Related Video
How to Add Alt Text to a Web Page Image

©2014 About.com. All rights reserved.