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:
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
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.
You should get into the habit of always using the
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.
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.
Deprecated and Obsolete
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.
LONGDESC attribute allows you to put a URL to a longer description of the image. This attribute is obsolete in HTML5. You should use a normal
A tag to link to a longer description instead. This attribute is valid HTML4, and is not deprecated in that version.
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.
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.
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.
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