Web Workshop

Images in an HTML Document

Types of Images

Web browsers can typically read two types of images: GIF and JPG. Both types allow different levels of compression - they make image files of smaller sizes at the expense of image quality.

GIFs compress an image by getting rid of colors - GIFs can have, at most, 256 colors. They are best used for texts of graphics that does not use too many colors but needs sharpness and clarity.

JPGs compress an image by getting rid of sharp features. They are best suited for photos, which require lots of colors but not so much sharpness.

Example 1: Text-type Image File
High-quality JPEG file (7KB) Good quality, but file size is big.
Low-quality JPEG file (4KB) Smaller file size, but some color distortion and blurring around text.
Low-quality GIF file (1KB) Since the image only needs two colors, GIF file can be very small and still retain good quality.
Example 2: Photo-type Image File
High-quality JPEG file (11KB) Good quality, but file size is big.
Low-quality JPEG file (5KB) Since the photo does not have very sharp features, low quality JPG file does not change the image quality significantly.
High-quality GIF file (7KB) High quality GIF files have 256 colors, which is still sufficient for this picture.
Low-quality GIF file (2KB) Low-quality GIF file has only 8 colors, which significantly reduces the file size but at the same time produces a poor quality image.

Computer monitors are set to 72 dpi (dots per inch). To make sure your image has the same size on a web browser and all other applications, you should set your graphics to 72 dpi.

The Image Tag

Images are inserted into an HTML document by an IMG tag: <IMG SRC= "imagefile.jpg">. IMG tag does not have a matching end.

Image tag	<IMG SRC= "imagefile.jpg">
End tag	none
Attributes	BORDER=# ALIGN (left, right, center; bottom, top, middle) ALT= "alternate text goes here"
Example	<IMG SRC= "imagefile.jpg" BORDER=0 ALT= "imagefile"> The ALT attribute sets the text that appears while the image is loading or when using text-only browser

You can also apply an image as a background for the page by using the body tag:
<BODY BACKGROUND="imagefile.jpg">
The specified image will be tiled on the entire page.

Images can be re-sized in an HTML document by the browser by setting the width and/or height of the image. If only one of the dimensions is specified, the browser will, by default, resize the picture to scale. For example, if you had an image called image.jpg that is 200 by 200 pixels:

<IMG SRC="image.jpg"> will display the image as its original size, 200 by 200.
<IMG SRC="image.jpg" HEIGHT=200 WIDTH=200> will display the image as its original size, 200 by 200.
<IMG SRC="image.jpg" HEIGHT=100 WIDTH=100> will shrink the image to be 100 by 100.
<IMG SRC="image.jpg" HEIGHT=150> will shrink the image to scale to be 150 by 150.
<IMG SRC="image.jpg" HEIGHT=150 WIDTH=100> will shrink the image to be 150 by 100, distorting it.

Aligning the Image

Images are aligned using the ALIGN=" " attribute in IMG tag.

Code	Description	Example
ALIGN=LEFT	Places the picture on the upper left corner of the paragraph it's in.	This image is aligned to the left. This image is aligned to the left. This image is aligned to the left. This image is aligned to the left. This image is aligned to the left. This image is aligned to the left. This image is aligned to the left. This image is aligned to the left. This image is aligned to the left. This image is aligned to the left. This image is aligned to the left. This image is aligned to the left.
ALIGN=RIGHT	Places the picture on the upper right corner of the paragraph it's in.	This image is aligned to the right. This image is aligned to the right. This image is aligned to the right. This image is aligned to the right. This image is aligned to the right. This image is aligned to the right. This image is aligned to the right. This image is aligned to the right. This image is aligned to the right. This image is aligned to the right. This image is aligned to the right.
ALIGN=TOP	Puts one line of text vertically aligned to the top of the picture; the rest of the paragraph goes below the picture.	This image is aligned to the top. This image is aligned to the top. This image is aligned to the top. This image is aligned to the top. This image is aligned to the top. This image is aligned to the top.
ALIGN=BOTTOM	Puts one line of text vertically aligned to the bottom of the picture; the rest of the paragraph goes below the picture. This is the default setting if ALIGN attribute is not defined.	This image is aligned to the bottom. This image is aligned to the bottom. This image is aligned to the bottom. This image is aligned to the bottom. This image is aligned to the bottom. This image is aligned to the bottom. This image is aligned to the bottom.
ALIGN=MIDDLE ALIGN=CENTER	Puts one line of text vertically aligned to the middle of the picture; the rest of the paragraph goes below the picture.	This image is aligned to the middle. This image is aligned to the middle. This image is aligned to the middle. This image is aligned to the middle. This image is aligned to the middle. This image is aligned to the middle. This image is aligned to the middle. This image is aligned to the middle.

Resizing an Image

Pixel interpolation in a browser is not as advanced in image processing applications, and resizing an image in a browser often result in jagged appearance. Whenever possible, you should resize an image using an image software, then use the original size in the web page.

Exercise 3

Choose an image (either from the computer or from the web) and save it into the same folder as your index.html file.
Using the IMG tag, insert this image into your document.
Insert the same image at another location on the page, but reduce the size by half.
Save index.html.

© June 2001 | Thermal Analysis of Materials Processing Laboratory
Tufts University Medford, MA 02155 | Contact: Haruna Tada