One of the most interesting possibilities of web pages is their capability to display images. This page shows how to include images in your HTML document.

Images, though, can slow down the loading process of your web page, so when selecting them, make sure that they are not too big and that there aren't too many in the same page.

The most common image formats used on a web page are GIF and JPEG images. To learn more about image formats for the web, go to HTML Resources.

• Incorporate the image:

  To incorporate an image in your web page, write the following line of code:

  <IMG SRC="image name.extension">

  Where "image name" is the name of the image and ".extension" is the image extension name: most of the times this will be .gif for GIF images, and .jpg for JPEG images.

   

• Indicating the size:

  It is always advisable to include the width and the height in pixels of an image in its tag, because it speeds the loading of the page

  <IMG SRC="image name.extension" WIDTH="" HEIGHT="">

  The width and height information can be seen in your graphics program (PaintShop Pro, or Photoshop), and in the title bar of your browser if you happen to use the browser to see the image.

   

• Indicating an Alternative Text Identification:

  It is also good practice to include an additional property in the <IMG> tag, especially when you are using the image as a link. With this ALT property you display alternative text information for browsers that, for one reason or another, don't display images. It is a nice way of providing the user with the most information possible. This could be the code for a picture of your class:

<IMG SRC="image name.extension" ALT="This is my class">

• Image Alignment:

  You can specify the way you want your image to aligned with a text. If you don't specify an alignment, the text will appear in alignment with the bottom of the image, like in this example:

  <IMG SRC="/images/Blue Blank92A3.gif" WIDTH="77" HEIGHT="32" ALT="Text aligned with the bottom.">Some text goes here aligned with the bottom of the image.

  Some text goes here aligned with the bottom of the image.

  See the other two most common alignments, top and middle:

  <IMG SRC="/images/Blue Blank92A3.gif" WIDTH="77" HEIGHT="32" ALT="Text aligned with the top.">Some text goes here aligned with the top of the image.

  Some text goes here aligned with the top of the image.

  <IMG SRC="/images/Blue Blank92A3.gif" WIDTH="77" HEIGHT="32" ALT="Text aligned with the middle.">Some text goes here aligned with the middle of the image.

  Some text goes here aligned with the middle of the image.

   

• Images As Links:

  As mentioned in the Links page, images can be used as links. Treat them as the text in a hyperlink text:
  

  <A HREF="#top"><IMG SRC="images/UpArrow5222.gif" ALT="Top" WIDTH="17" HEIGHT="16"></A>

  This code corresponds to this clickable image that takes you to the top of this page:

  

  The border that surrounds the page appears because it's a link. You can specify the thickness of the border (in pixels) , adding the BORDER property to the <IMG> tag. If you set the border to 0, it won't show. Here you have the same clickable image as above, this time with no border:

  <A HREF="#top"><IMG SRC="images/UpArrow5222.gif" ALT="Top" WIDTH="17" HEIGHT="16" BORDER="0"></A>

  
  

   

• Remember:

  -To indicate the WIDTH and the HEIGHT.
  -To use ALT to indicate an alternative text.
  -Images can be treated as links and you can set the width of their border.
  -There are other properties that you can set in the <IMG> tag. Consult the HTML Resources.