Link to USGS home page
Internal USGS Access Only

Learning HTML - Images

Images
Displaying a graphic in a web document is done with the IMG element.
<img src="images/dog.gif"> Running dog

You should always provide text to be displayed when the graphic is not available, this is done with the ALT attribute. (If the graphic is purely decorative, an empty ALT tag can be used.)
<img alt="Running dog" src="images/dog.gif">

Web browsers download the text of a page first, and then try to lay out the page before the graphics have even been obtained. To help the browsers in this task use the HEIGHT and WIDTH attributes. (A perl tool called wwwis can do this for you.)
<img height="34"
     width="36"
     alt="Running dog"
     src="images/dog.gif">

Simple moving images can be done with animated GIFs.

Note: As cute as they are, moving images can be so distracting that people may be unable to read from the page. Animations that execute once and stop are more reader-friendly.

The TITLE tag will cause a tool tip to be displayed when the cursor is hovered over the image.

<img height="34"
     width="36"
     alt="Yin and Yang"
     title="Ying &amp; Yang"
     src="images/yin_yang.gif">

Positioning Images
By default text that is on the same line as an image will line up with the bottom of the image. The vertical-align style (Cascading Style Sheets) can be used to change this. .
Yin and
<img src="yin_yang.gif"> Yang. 		Yin and Yin and Yang Yang.
Yin and
<img src="yin_yang.gif"
  style="vertical-align:middle"> Yang. 		Yin and Yin and Yang Yang.
Yin and
<img src="yin_yang.gif"
  style="vertical-align:top"> Yang. 		Yin and Yin and Yang Yang.
Clickable Images

An image can be made a link by surrounding it with an anchor:
<a href="http://www.amazon.com">
  <img style="border: 0" src="amazonlogo.gif">
</a>

The style="border: 0" keeps the image from being surrounded by a blue box.

Inline images will be in one of three formats, GIF, JPEG or PNG. The relative advantages of these are covered in the section on graphics.

slide 12

[up]
"Mastering a Web Site" online course
Created and maintained by Lorna Schmid and David Boldt.
http://water.usgs.gov/usgs/training/webmaster/html_images.html    
Last modified: Tue Oct 14 17:49:54 EDT 2003