The "img" tag allows images of .jpg, .png, and .gif types to be linked from an html page. It is not actually possible to include an image directly in the html file as the types are not compatible. An HTML file is pure ASCII text, while the graphics formats are not. The files, then, must be linked using the <img> tag.
Here is a brief comparison of the different web compatible graphics file types:
| Type: | Web Compatible? |
Colors: | Uses: | Animation (Layers) |
Transparancy? | Lossy? |
| .jpg | Yes | millions | photos | No | No | Yes |
| .png | Yes | millions | photos | No | Yes | No |
| .gif | Yes | 256 | Everything else! | Yes | Yes | No |
| .xcf | No | millions | Native GIMP format | Yes | Yes | No |
* Please see the JPG and GIF logo comparison page!
There are several parameters that can be used with the img tag. Here are some of the most common:
<img src="name.jpg" />
-or-
<img src="name.gif" />
-or-
<img src="name.png" />
img tells you it's the image tag. The "src" parameter provides a link to the file. You can see there are 3 different formats that work on the web (.jpg, .gif, or .png).
|
<img src="name.jpg" alt="Picture of me" />
The alt parameter (optional) provides text which is displayed when the mouse is over the image. It also provides information on the image to those using a text browser.
|
<img src="name.gif" height="320" width="240" />
The height and width parameters overide the actual dimensions of the image. If your image is very large, and you want to put a thumbnail on your homepage, do NOT use these parameters! The browser must still load the entire image before it shrinks it!
|
<img src="name.gif" border="0" />
The border parameter allows the user to add (or remove) the picture border.
|
<img src="name.gif" align="right" />
The align parameter tells the browser to render the picture right-justified. The default is left justified.
|
<img src="graphics/name.gif" />
The difference in path shows that the graphic named is in a sub-directory called graphics (a sub directory called "graphics"). I would recomend this approach since it allows you to keep your www directory tidy. Additionally, if you don't have an index.html file in your graphics directory, you can directly view the contents of the directory (including file size) by simply entering the directory name into the url.
|
Please note that you can use any combination of parameters within a given
tag! i.e. if your graphic is called school.jpg and it is stored in your
graphics sub-directory and you would like the height and width to be
specified as well as a border:
<img src="graphics/school.jpg" height="480" width="640" border="2" /> |