Adding an Image to Your Webpage

Some things to think about before you add images:

• File size - You don't want to put huge images on your pages, otherwise it will take to long to download and people will get tired of waiting and leave. You have several options for dealing with this. Either you scale down the file size (using graphics software such as Adobe Photoshop), or you can make a clickable thumbnail of the image. I will include instructions on how to do this in this tutorial.

• File Type - Some image types look good on the web and some don't. The two most commonly used formats for the web are gif and jpg. I have found that jpg tends to look the best in terms of color and clarity.

I'm going to insert a picture here as an example, and walk you through the editing process. I want to have a picture of a Great Pyrenees dog on this page, and I want it to be on the left hand side, with text wrapped around it. You can see the finished product where it is, and we'll go back through the preliminary steps to get there.

1. With your webpage open in FrontPage, place your cursor on the spot where you would like to have your image.

2. From the top menu, select "Insert" - "Picture" - "From file" You can now select the file that you wish to insert.

3. It may look awful when it is first placed on the page, you'll have to tell FrontPage exactly how you want it. (see following steps)

4. Right-click on the picture and select "Picture Properties"

5. As you can see in the screen shot above, you can change the size of your picture using FrontPage, among other things. You need to designate here with "Wrapping Style" which side of the page you want the picture to be on. By selecting the wrapping style, your text will flow around the image. I also recommend using the Horizontal and Vertical spacing (under layout), so that the text isn't scrunched tightly around the image.

6. When you go to save the page, FrontPage will ask you if you want to save the "Embedded Files" (the image/s) Simply hit OK and your images will automatically be imported to the server.

How about making thumbnails?

1. This is super easy - once you have inserted the image on the page, simply right click and select "Auto-thumbnail". From this point on, when you go to picture properties, you will be editing the thumbnail.

2. Now right-click on the thumbnail and select "Hyperlink Properties". Click on "Target Frame" and select "New Window". Then just hit "OK" and that will make it such that when the user clicks your thumbnail, it will open in a new window.

How about a mouse-over description of the picture instead of a boring ole' caption!

1. To do this, right-click on the thumbnail and select "Picture Properties". Under "Alternative representations", in the Text field, simply type your captions and press the OK button. Once you have saved the page, when you mouse-over on the page, your caption will appear.