This browser does not support basic Web standards, preventing the display of our site's intended design. May we suggest that you upgrade your browser?

HTML Coding

Basics of Web Publishing: Adding Images to Web Pages

NOTE: These pages will remain available for your reference, but will not actively be maintained due to UW-Eau Claire's adoption of FrontPage for web publishing.

Images are a popular way to enhance your Web pages. The recommendations section of the UWEC Web Design Tips identifies some of the considerations that you should review when incorporating images into your pages.

return to top Image Types

Two types of images can currently be used in Web documents: GIF (CompuServe® Graphics Interchange Format) and JPEG (Joint Photographic Expert Group, also referred to as JPG).

As most Web browsers can display GIF images without a special program, GIF images are the most frequently used in Web documents. The GIF image is appropriate for line and computer drawings.

JPEG images are growing in popularity as they provide better resolution for photos, half-tones, and images with several color changes. The popularity is also due to integration of a JPEG viewer in newer browsers, like Netscape. Prior to the integration users required a special program to view these images.

return to topImage Sources

The UWEC Web Development Tools Image Archive contains a collection of images that can be used when you create your web pages. This collection includes various images for bulleted lists, dividing borders, and signs and symbols. The URL for these images can be pasted into your Web documents. The instructions for this are listed at the top of the icon archive page.

Images are also available at various sites throughout the Internet. The UWEC Web Development Tools Resource List contains several links for you to begin your search. If you cannot locate an image that meets your needs, you can look to alternative resources including: scanning, creating images with a graphics/drawing programs, or using the digital camera.

Capturing Images from the Web

When you locate an image that you want to add to your collection, first verify that you can use the image and check for any requirements for that right. Once you have verified that it is legal for you to use the image, you can save it to your disk by:

Windows Users

  1. With your mouse, point to the image
  2. Click on the right mouse button to access the Quick menu
  3. From the Quick menu, select Save Image As ...
  4. In the Save Image As dialog box, identify the location that the file should be saved in
  5. If necessary, adjust the file name
  6. Click SAVE

Macintosh Users

  1. With your mouse, point to the image
  2. Click and hold the mouse button to access the Quick menu
  3. From the Quick menu, select Save Image As ...
  4. In the Save Image As dialog box, identify the location that the file should be saved in
  5. If necessary, adjust the file name
  6. Click SAVE

return to topAdding Images

Images are added by means of code just like formatted text or horizontal rules. Images may be taken from graphics packages or from sites on the Web. When adding them to your Web page, you will need to indicate their location as part of the code. It may be helpful to review URLs.

The following code creates the coffee cup that you see below it:

<IMG SRC="http://www.uwec.edu/icons/Misc/cup.gif" ALT="Coffee Cup" WIDTH=64 HEIGHT=40>

Coffee Cup

Image Code

Anchor: <IMG SRC=
Image File: "http://www.uwec.edu/icons/Misc/cup.gif"
Alternate Text: ALT="Coffee Cup"
Note: This is the text that non-graphical browsers will see instead of the graphic.
Size: WIDTH=64 HEIGHT=40
Close IMG SRC: >

Determining Width and Height

For faster loading, you should include the height and width for the actual size of the image.

To determine the size of your image in pixels:

  1. Point to the image and click the right mouse button.
  2. From the Quick menu, select View Image
    In newer versions of Netscape, the dimensions are shown in the title bar. If they are not shown, proceed to the next step.
  3. From the View menu, select Document Info
    Dimensions are shown in pixels. Width is the first number, height is second.

A program like Photoshop may also be used to determine the dimensions of an image.

Coding Resource

For a quick reference of coding, go the the HTML Codes for Images summary. This page includes the basics of image code and additional attributes, along with a more detailed explanation of each code.

return to topImages as Links

When using the image as a link, the code for the image must be embedded within the link. For example, the following code is the link to the UWEC Homepage. It begins with the link to the Homepage, followed by the code for the image (with alternate text for text-based browsers), and ends with the closing anchor.

Image Link Example

<A HREF="http://www.uwec.edu/">
<IMG SRC="http://www.uwec.edu/icons/UWECWeb/smuwec.gif"ALT="[UWEC Web]" WIDTH=54 HEIGHT=48>
</A>

[UWEC Web]

Image Link Code

Link to Homepage: <A HREF="http://www.uwec.edu/">
Image Code: <IMG SRC="http://www.uwec.edu/icons/UWECWeb/smuwec.gif"
Alternate Text: ALT="[UWEC Web]"
Size: WIDTH=54 HEIGHT=48>
Off Code for Anchor: </A>

return to topOptions for Working with Images

These image options can be used to customize the images in your document. The codes are placed within the image tag. Image options include:

Changing the Size of an Image

When using the height and width attributes you may distort your image unless the values are proportional to the original size.

To change your image proportionally, you must maintain the ratio. In other words, if the dimensions are 400 X 200, proportionate changes would include 200 X 100, 40 X 20 and 800 X 400. Not all images are suited to adjustments of size; resulting image quality may, therefore, be poorer than the original.

Distortion of an image may be acceptable or desirable, depending on the image and your purposes. You may make disproportionate changes to an image by changing the height and not the width, or by changing the width and not the height. Distortion may also occur by changing both width and height but not maintaining their ratios.

Adjusting the Height of an Image

<IMG SRC="URL" HEIGHT=N>
Replace N with a number value proportional to the width of your image. Experiment with a range of numbers to find the height that fits your image.

Result Code
Original
Coffee Cup		 <IMG SRC="http://www.uwec.edu/icons/Misc/cup.gif" ALT="Coffee Cup">
Height=25
Coffee Cup		 <IMG SRC="http://www.uwec.edu/icons/Misc/cup.gif"ALT="Coffee Cup" HEIGHT=25>
Height=50
Coffee Cup		 <IMG SRC="http://www.uwec.edu/icons/Misc/cup.gif"ALT="Coffee Cup" HEIGHT=50>
Height=75
Coffee Cup		 <IMG SRC="http://www.uwec.edu/icons/Misc/cup.gif"ALT="Coffee Cup" HEIGHT=75>

Adjusting the Width of an Image

<IMG SRC="URL" WIDTH=N>
Replace N with a number value proportional to the height of your image. Experiment with a range of numbers to find the width that fits your image.

Result Code
Original
Coffee Cup		 <IMG SRC="http://www.uwec.edu/icons/Misc/cup.gif" ALT="Coffee Cup">
Width=25
Coffee Cup		 <IMG SRC="http://www.uwec.edu/icons/Misc/cup.gif"ALT="Coffee Cup" WIDTH=25>
Width=50
Coffee Cup		 <IMG SRC="http://www.uwec.edu/icons/Misc/cup.gif"ALT="Coffee Cup" WIDTH=50>
Width=75
Coffee Cup		 <IMG SRC="http://www.uwec.edu/icons/Misc/cup.gif"ALT="Coffee Cup" WIDTH=75>

return to topAdding Borders

Border=0 is no border. You can substitute numbers for 0 to control the width of the border as shown in the following example:

<IMG SRC="http://www.uwec.edu/icons/Misc/cup.gif; ALT="Coffee Cup" BORDER=3 WIDTH=64 HEIGHT=40>

Coffee Cup

return to topAligning Images

The ALIGN attribute can be used to position the image relative to the text and provides several options for you. Additional control over the placement of the text and images can be achieved by using Tables.

Original: <IMG SRC="http://www.uwec.edu/icons/Misc/cup.gif"ALT="Coffee Cup" WIDTH=64 HEIGHT=40>
Coffee Cup Image options help you have additional control over the placement of your text. In this example the default alignment is set so the text begins after the graphic (at the bottom). When it wraps around, the text returns to the left margin.
Left: <IMG SRC="http://www.uwec.edu/icons/Misc/cup.gif"ALT="Coffee Cup" ALIGN=LEFT WIDTH=64 HEIGHT=40>
Coffee Cup Image options help you have additional control over the placement of your text. With alignment set as LEFT, the text wraps around the graphic (which is at the left margin). If you have a limited amount of text, the text will be centered next to the graphic. If you have more text than can fit next to the graphic, the text will surround the graphic and then return to the left margin.
Right: <IMG SRC="http://www.uwec.edu/icons/Misc/cup.gif"ALT="Coffee Cup" ALIGN=RIGHT WIDTH=64 HEIGHT=40>
Coffee Cup Image options help you have additional control over the placement of your text. With alignment set as RIGHT, the text wraps around the graphic (which is at the right margin). If you have a limited amount of text, the text will be centered next to the graphic. If you have more text than can fit next to the graphic, the text will surround the graphic and then flow underneath the graphic (as illustrated by this example).
Excellence. Our Measure. Our Motto. Our Goal.