IMG Tag Attributes

Use of the HTML IMG Tag for Pictures and Objects

The HTML IMG tag governs the insertion of pictures and other static graphical objects within a web page. This common tag supports several mandatory and optional attributes that add richness to your ability to design an engaging, image-focused website.

An example of a fully formed HTML IMG tag looks like this:

 

Required IMG Tag Attributes

SRC. The only attribute you need to get an image to display on a web page is the SRC attribute.

This attribute identifies the name and location of the image file to be displayed.

ALT. To write valid XHTML and HTML4, the ALT attribute is also required. This attribute is used to provide nonvisual 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.

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. To avoid confusion, use descriptive alt text that says (for example), “About Web Design and HTML” instead of just “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. 

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

WIDTH and HEIGHT

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

TITLEThe attribute is a global attribute that can be applied to any HTML element. Moreover, the TITLE attribute lets you add extra information about the image.

Most browsers support the TITLE attribute, but they do it in different ways. Some display the text as a pop-up 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 don't count on this information being either hidden or visible. You should most definitely not use this to hide keywords for search engines. This practice is now penalized by most search engines.

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

LONGDESCThe attribute supports URLs to a longer description of the image.

This feature makes your images more accessible.

Deprecated and Obsolete IMG Attributes

Several attributes are now obsolete in HTML5 or deprecated in HTML4. For best HTML, you should find other solutions instead of using these attributes.

BORDERThe 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.

ALIGNThis 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.

HSPACE and VSPACEThe HSPACE  and VSPACE attributes 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.

LOWSRCThe 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. It is not deprecated in HTML4 or obsolete in HTML5 because it was never an official part of either specification.

Avoid using this attribute and instead optimize your images so that they load quickly. Speed of page loading is a critical part of good Web design, and large images slow pages down enormously—even if you use the LOWSRC attribute.