The <img> Tag

Topics on This Page

The <img> Tag
Using Images
The src Attribute

The <img> Tag

HTML:   <img>
XHTML:  <img />
   (The XHTML format works in both HTML and XHTML)

Attributes you should always include:
   src="uri"
   alt="alternate text"
   width="width[%]"
   height="height[%]"

Optional attributes:
   title="alternate text"
   align="bottom|top|middle|left|right"          (deprecated)
   align="baseline|texttop|absmiddle|absbottom"  (proprietary)
   border="pixels"                               (deprecated)
   hspace="pixels"                               (deprecated)
   vspace="pixels"                               (deprecated)

Using Images

As you develop web pages, you'll certainly want to include images on your pages. The <img> tag is the tag that you use for this.

The <img> tag is an empty, inline tag. As an inline tag, you can include it inside block tags such as <p> and <h1>. In strict HTML, you must include inside a block tag — otherwise, it is disallowed just like naked text is disallowed.

There are a lot of things you need to consider when you're using images. I'll first spend several pages discussing the various attributes of the <img> tag. Then I'll spend some time discussing other considerations.

Almost all browsers that support images support GIF (.gif) and JPEG (.jpg) images. Newer browsers (MSIE 4+ and Netscape 4.04+) also support PNG (.png) images, although they may not support all features of PNGs. MSIE 4+ also supports a number of additional types such as BMP (.bmp) and TIFF (.tif) — you should avoid these because other browsers don't support them, and because they're not good choices for the web anyway because they tend to be much larger files than the equivalent GIF or JPEG images.

The src Attribute

All <img> tags must include a src attribute — this is the attribute that tells the browser where to find the image. It is used in much the same way as the href attribute of the <a> tag.

If the image resides in the same directory as your web page, just specify the file name: src="myimage.gif". Be careful: the image name is case-sensitive if your site is hosted on a Unix server. When you develop your pages on your PC or Mac, the name is NOT case-sensitive. If the name doesn't match in case, it may work fine on your computer but may not work after you've uploaded them to the server.

It's generally preferable to place your images in a separate directory — this is for your own convenience, and prevents having so many files in one directory. You can create a subdirectory and name it something like "images" or "graphics." You'd then code src="images/myimage.gif". Remember to use forward slashes ("/") rather than backward slashes ("\"). Backward slashes will work in IE, but not in other browsers.

You can also link to images on other web sites. Be sure you only do this if you have permission from the other web site — anytime someone looks at your page, your browser has to access the other web site to obtain the image. This puts additional load on the other web site. If you don't have permission for this, you're stealing bandwidth from the other web site. Most web site owners would prefer you to copy the image to your own site and reference it locally (be sure to only take images that you have permission to take!).