HTML Topics
©1998–2010 R. Hinton, Broome
Community College
Last Updated: 18–Feb–10
Images can potentially enhance a Web Page. In fact, this has contributed to the popularity of the World Wide Web. Not only is it just for fun, but businesses usually include company logos and some even use them to display products for sale. Images can be scanned in or created in a drawing program. Many word processing programs provide images also. Finally, images can be found on the Internet itself. However, not all graphics are free. Many are copyrighted. Contact the Webmaster of the site and obtain their permission to use the images.
This could actually be a web page all in itself. However, I will briefly describe the formats commonly supported by most browsers. (This is taken from Projects for HTML by Linda Erickson) The two most common formats are .GIF (pronounced jiff or .JPEG (or .JPG; pronounced j-peg). While millions of colors are available, the human can’t really distinguish that many. So which do you pick? “If your image is small, has blocks of the same color, or has few colors, the best format for the image is .GIF” since it limits the colors to (at most) 256 and produces a smaller file. .GIF is the safest format. “If your image is large, has no blocks of color but instead has subtle tones, or has many colors, the best format for the image is .JPEG” since it supports 16 million colors. No matter what the format, try to limit the size of all the image files on a Web Page to a total of 30K so it doesn’t take too long to load your page.
Consider how long it took to load this page. I went over the limit! Also notice which format I used for each image. Compare them with the “rules” described above. Finally, all images used on this page were provided by Microsoft Office and were converted to either .GIF or .JPG if not in that format originally.
Images may be stored locally on your machine or may be at other web sites. Insert them using the <IMG SRC> tag and define either the local or Web address of the image file. However, unlike other tags, the <img src> tag isn’t paired. If the image file is in the same directory as your Web Page, then all you have to provide is the image’s filename. This takes the following general format:
<img src="FileName">
where the FileName is replaced with filenames specifically related to your Web Page. Note: The filename is case sensitive. The following <img src> tag displays an image stored in the same directory as this Web Page:
<img src="lookout.gif">
If the file isn’t in the same directory, then the entire path to that file must be listed. This takes the following general format:
<img src="/Path/FileName">
where the Path is replaced with the path specifically related to your Web Page and can contain multiple directories. Note: The path is case sensitive. The following <img src> tag displays an image file stored in a different directory from this Web Page:
<img src="/~hinton_r/images/parade.gif">
If the image is stored on another computer, then you must provide the entire address to the image. REMEMBER, images stored on the Web come and go every day! Periodically you should check these links to ensure they are still valid. Images stored on other Web Pagess take the following general format:
<img src="http://URL/Path/FileName">
where the URL, Path, and FileName are replaced with the URL, path, and filename specifically related to your Web Page and the path can contain multiple directories. The following <img src> tag displays an image file stored at a Web Site:
<img
src="http://web.sunybroome.edu/~hinton_r/images/finish.gif">
Many surfers don’t load images or their browsers don’t support particular image formats. Providing alternative text is a good way to describe the image. To do this, modify the <img src> tag:
<img
src="http://web.sunybroome.edu/~hinton_r/html/examples/finish.gif"
alt="The Finish Line"> 
Just like color, images can also be used as page backgrounds. The following <body> tag was used for this page:
<body background="../images/sunset.jpg" text="white" link="white" vlink="yellow" alink="red">
Images can be used as links. (If you don’t understand links, see the Web Page Creating Links) However, this is a topic for another time. A link will be added later to this page describing how to create image links.
Images and text can appear on the same line. However, this is a topic for another time. A link will be added later to this page describing how to integrate text and images.