<IMG> - In-line Image Tag

The <IMG> tag is used to include an image (GIF or JPG file format) in your document along with the text. Images appropriate for use on Web pages should be created using a graphics package like Adobe Photoshop 5.5 or Macromedia Fireworks and saved in an appropriate file format (GIF is appropriate for simple graphics like titles, buttons, or line art; JPG is appropriate for images with a lot of gradation like photographs). A new format called PNG is also now available for use on the Web; however, it should be used with great caution because on the newest versions of the browsers can display it.

Should you need images for your Web pages, work through the normal channels in your service unit. Library Services staff should contact Elizabeth Miller for new graphics.

The <IMG> tag never has a closing tag, and has the following attributes available:

SRC="URI"

Enter the URL for the image here. For example, use SRC="http://www.loc.gov/homepage/lc2.gif" for the Library of Congress logo.

ALT="Text to Display in Place of Image"

This attribute specifies what text-only browsers like LYNX or browsers with image display "turned off" use in place of the image. Otherwise a meaningless default like "[Image]" is displayed.
- If the image is only for decoration, use ALT="" so nothing is displayed in the text browser.
- If the image is used for a title, use ALT="Title Here" to provide a text version of the title.
- If the image is used with the <A> tag to make it a "button", use ALT="[button name]" to make a text "button". The "[ ]" are not required, but it helps make the text look more like a button.

ALIGN=top | bottom | middle | left | right

The ALIGN= attribute says how the text following the image should be lined up. You can use the <BR> or <P> tags to force text to come below the image, instead of beside it.
ALIGN=top - Line text up at the top of the image.
ALIGN=middle - Line text up centered beside the image.
ALIGN=bottom - Line text up at the bottom of the image.
ALIGN=left - Line text up with image on left and text to the right (more that one line wraps next to the image, but this does not work on all browsers).
ALIGN=right - Line text up with image on right and text to the left (more than one line wraps next to the image, but this does not work on all browsers).
Image Alignment Examples page [http://www.loc.gov/iug/html/32image.html]

HEIGHT=##, WIDTH=##

Pixel height and width should be indicated for all images. This "extra" step will cause your page to load more quickly, because the browser will know how much space to save for the images and will be able to load the text more immediately. The numbers used must exactly match the actual size of the image, or distortion will occur. Do not use the height and width attributes to size and image "on-the-fly." This will slow down the loading of the page. Do use a graphic program (like Adobe Photoshop) to size the image for your needs.
- HEIGHT=45 (45 is an integer representing the pixel height of the image)
- WIDTH=150 (150 is an integer representing the pixel width of the image)

BORDER=#

When an image is used as a hypertext link, by default, it will be surrounded by a border. The BORDER= attribute allows you to turn the border off (BORDER=0) or make it thicker (BORDER=5, etc.).

Go to:

• Glossary of HTML Tags (By Category)
• Home Page
• Library of Congress Home Page