ARCHIVED: How do I include images on a web page?

Basic image display

To include images on a web page, use the HTML <img> tag. The basic form is:

  <img src="filename">

Replace filename with the name of an image in JPEG, PNG, or GIF format. You will see the image when you view the page with a graphical browser such as Firefox, Safari, or Internet Explorer.

Alt text and accessibility

You should also include alt text, or text that will replace the image in text-only browsers, for example:

  <img src="mypic.gif" alt="Picture of my dog">

Screen readers for people with visual disabilities, mobile devices, and browsers with images disabled use alt text to render your content. Without alt text, your web page might not be comprehensible in such cases. For detailed accessibility guidelines, see Indiana University's Web Standards.

Alignment

By default, images are aligned to the left with subsequent text continuing at the lower right of the image. You can specify alignment of the surrounding text with the align attribute. For example, to have text start at the upper right of your image, you could use:

  <img src="mypic.gif" align=top>

You can also set alignment to bottom, middle, left, and right. Using left and right alignment creates floating images, allowing you to wrap text around an image. In some browsers, however, floating images may overlap other content on the page.

If you use a floating image, you can add vspace and hspace attributes to the <img> tag to add space between the image and the surrounding text. The amount of vspace and hspace controls the vertical and horizontal space around the image in pixels. For example, to add two pixels of vertical space:

  <img src="mypic.gif" align=right vspace=2>

Image hotlinks

You can make an image into a hotlink by including it inside the scope of <a href> tags, for example:

  <a href="http://www.someplace.com/">
    <img src="someplace.gif" alt="SomePlace Page" border=0>
  </a>

Including the attribute border=0 will prevent the image from being outlined in the hotlink color. If the image is a command button (e.g., clicking it returns to the home page), you should provide explanatory text with the alt attribute, as described above. Otherwise, users of text browsers might not know what the link does.

Resizing and positioning images

To help browsers display a document faster, or to change the size of an image, you can add height and width attributes. Set the value in pixels (e.g., height=72) or in percentages (e.g., width=150%).

Note: You can control image positions using style sheets; for more about style sheets, see ARCHIVED: What is CSS? Images can also be included in the scope of other HTML tags such as table elements to give you more control over their position in older browsers with poor CSS support.