Using Graphics Effectively - The Image Tag  pwp home  >   Reference Library  >   HTML Tutorials  >  Image Tag

One of the main things that sets the World Wide Web apart from the rest of the Internet is the highly graphical look of the information presented. Writing effective image tags can help you to get the most out of your graphics, while still making them accessible to the largest number of viewers.
 
The <IMG> Tag: Incorporating graphics into your pages means using the <IMG> tag, the important mark up element that handles all embedded graphical content in HTML documents. Yet, time and again we see websites that use this tag poorly. This image element, which has no closing element, has some common attributes everyone should use, and some optional ones that can enhance its flexibility.

It always begins with <IMG and ends with a closing >. At minimum, a good tag should look like this:

<IMG SRC="www.gif" WIDTH=77 HEIGHT=69 BORDER=0 ALT="www logo" ALIGN=left>

Let's look at this piece by piece and then cover some optional additions.
 
SRC: The value of the required SRC attribute is the URL (either absolute or relative) of the image you want to display, enclosed in quotes: SRC="mypic.gif". Please note that filenames are case sensitive; "mypic.gif" is not the same as "MYPIC.GIF" or "Mypic.gif" so watch that your code and your filename as it uploads to your site are the same. This is one of the most common problems new designers have with their graphics not displaying.
 
WIDTH & HEIGHT: While not mandatory, you really should use these attributes, which specify the dimensions of the image in pixels. This way the browser can determine how to layout the text before the image is downloaded, allowing the user to see and begin to read the text before the picture is displayed fully. It also allows users who surf with image loading turned off to see an exact-size placeholder, thereby preserving your text layout, and displaying your ALT text (see below).
 
Most graphics programs, display these size attributes, and many HTML editors, will automatically add Height and Width attributes for you when you import graphics.
 
The proper syntax is: WIDTH=98 HEIGHT=104. Some people resize graphics by typing in a size different from the actual downloaded file. This is a poor idea generally, both in design and in terms of bandwidth. It is best to resize your graphics in a graphics program and download the actual size graphic. The exception is when you use a graphic repeatedly on a page at different sizes (like a transparent 1x1 .gif used as an indentation). Then it saves bandwidth to just download a small version once and resize it with the Height and Width attributes.
 
ALT: This tag should be, IMHO, a MUST for all designers! It displays a brief text description of the image for a viewer to see when an image is loading, or if s/he is surfing with image loading off, or using a screen reader such as blind people use (see Designing Accessible WebSites). IE also uses ALT text set as a ToolTip to be displayed when the user's mouse pauses over the image.
The proper syntax is: ALT="my family home".
 
BORDER: This lets you control how thick a border shows around an image. Setting it to 0 prevents a border from showing at all, a good trick to avoid the default border around graphics that are links. The syntax is: BORDER=n, where n is the width of the border in pixels w.
This image has no border This image has border=2.

ALIGN: This gives you control over where the picture displays relative to surrounding text. Common alignments are:

• ALIGN=left: Image displays in the first available space on the left, and subsequent text wraps around the right of that image.
• ALIGN=right: Displays the image at the right margin, and the text wraps around the left.
• ALIGN=top: Aligns itself with the top of the tallest item in the line.
• ALIGN=middle: Aligns the baseline of the current line with the middle of the image.
• ALIGN=absmiddle: Aligns the middle of the current line with the middle of the image.
• ALIGN=bottom: Aligns the bottom of the image with the baseline of the current line.
• ALIGN=absbottom: Aligns the bottom of the image with the bottom of the current line.

If you want only one line of text to align with the picture, and the rest of the text to skip down until it hits the margins again, use <BR CLEAR=ALL, RIGHT, or LEFT>.

Examples:
Here is a picture that has the text next to it wrapping around to another line. Since I just used align=left, all text stays next to it.
 
Here, the text in the first line is next to the picture, but...
The rest is moved down to a new line by the Clear=All command. Take a look at the source code to understand how this was done.
 
VSPACE & HSPACE: These less common attributes can be used with left- or right-aligned images to create some vertical and/or horizontal space between the image and the surrounding text.
The proper syntax is: VSPACE=4 or HSPACE=10 where the number is the number of pixels of blank space. Examples:
Here is animage without space.
Here is animage with hspace of 16 and vspace of 5.
 
LOWSRC: This seldom used attribute allows you to have the browser load a smaller file (lower resolution, a gray scale version, etc.) first, and then a higher-quality final one, so the viewer has something to look at while the larger file is downloading. This is great when you want a big, colorful image on your page, but don't want the viewer to stare at blank space while it downloads. It is best to make them both the same size, and to specify the height and width attributes for both. The proper syntax: SRC="mypic.gif" LOWSRC="lopic.gif".

Lopic.gif will display quickly while mypic.gif, which will replace it, is still downloading. Browsers that don't support this attribute will just load the image specified in the SRC attribute as usual.
 
Scripting: These are not very common, but if you want to use JavaScript, there are some additional things you can do with IMG tags. The NAME attribute (NAME="home") sets the name of the image in the document to be used by scripting methods. You can use OnLoad, OnAbort, and OnError functions withing the IMG tag.
 
Other attributes: Image Maps, video, and virtual reality (VRML) are separate IMG-related topics in themselves. The more thorough HTML references will have more information on these special subjects.

To sum up, a good image tag should look like this at a minimum:

<IMG SRC="www.gif" WIDTH=77 HEIGHT=69 BORDER=0 ALT="www logo" ALIGN=left>