The image tag (img) is one of the first tags we learn when first building a Web site. It allows you to add a dimension beyond text, and if you're an artist, to show off your skills. But, many people don't use the tag and its attributes to the fullest extent.
The basic image tag looks like this:
<img src="url" />
Common Image Attributes
That is really all you need to place an image on a Web page. But there are benefits to using other attributes:
alt
In order to write valid XHTML, the alt attribute is also required. This attribute is used to provide non-visual browsers with text that describes the image or says what the image says, if the image has text on it. 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".
width and height
The width and height attributes should always be used, and almost always with the exact height and width. But they are not required for valid XHTML. These attributes speed up the rendering of the page, as the browser doesn't have to guess at the image size, nor does it have to do size manipulation.
Less Common Image Attributes
longdesc
The longdesc attribute allows you to place a pointer URL in your image tag to a longer description of the image. It allows you to supplement the information in the alt attribute.
title
The title attribute provides the ability to title your images. Many browsers now support the title attribute, but they do it in different ways. Some of the more interesting effects have been done using the title attribute and CSS with modern browsers. Use the title attribute to supplement the alt text and provide information that you don't necessarily need read inline with the text. But note that some screen readers may still read it.
usemap and ismap
These two attributes allow you to set client-side (usemap) and server-side (ismap) image maps to your images.
Deprecated Image Attributes
border
This deprecated attribute specifies the width in pixels of any border around the image. It has been deprecated in favor of CSS and should be avoided.
align
This deprecated 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.
hspace and vspace
These two deprecated spacing 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 might want to build it into the graphic itself. These have been deprecated in favor of the margin CSS property.
lowsrc
This deprecated attribute can be a huge benefit to slow loading large graphics. Use it to point to a smaller image (in bytes) that gives your readers an idea of the image to come. One simple way to create a lowsrc image is to take the high quality image and remove the colors from it. Black and white images (not grey-scale) are only two colors and load very quickly. This attribute is not supported in most browsers and should be avoided.
Images and the Clear Property
When using images, it's a good idea to know about a great feature in CSS, the clear property. If you have a right-aligned image, and you want the text to follow after it rather than wrap around, you can use the
clear:right;property on the following text (in a <p>, <span>, <div> or whatever). However, the easiest thing to remember is
clear: both;That will ensure that all text after that property will begin below the images.
