HTML Basics:
Icon: FrontPage Replace Image

Title: Jan's Illustrated Computer Literacy 101
españolIcon: Change web
Did you want IE9+, Chrome, Firefox; Notepad? Icon: Change web

You can reduce the download time of your page by using images that are sized correctly. You can use a graphics program, like PaintShopPro or Adobe Photoshop or Microsoft Image Composer (comes with the stand-alone versions of FrontPage 98 and 2000), to resize images. Or you can use the Resample button on the Pictures toolbar. The Pictures toolbar in FrontPage allows you to make several changes directly, without having to use a separate graphics program.

Correctly sized images for this lesson are available in your resource files.

It is important to include ALT text for each image that describes what the image is for. Text reader software will read your ALT text as though it were part of the text.

Where you are:
JegsWorks > Lessons > Web

Before you start...

Project 1: Browser BasicsTo subtopics

Project 2: HTML Basics
    HTML CodeTo subtopics
    About HTML
    What You Need
    Code by HandTo subtopics
    FrontPage/FPXTo subtopics
    Images in HTML Arrow - Subtopic open
    Icon: FrontPage FrontPage Arrow - Subtopic open OR FPXTo subtopics
    icon-footprintInsert Image
    icon-footprintMore Images
    icon-footprintInline Images
    icon-footprintReplace Image
    icon-footprintImage Link
        Align & Space
    icon-footprintAlign Images
        Image Issues
    icon-footprintSave Page
    icon-footprintEdit/Convert Image
    icon-footprintPictures Bar
    icon-footprintPublish Web
    FormattingTo subtopics
    TablesTo subtopics
    ConvertTo subtopics
    ExercisesTo subtopics


Icon Step-by-Step

Step-by-Step: Replace Image in FrontPage

 Icon Step-by-Step

What you will learn: to replace an image using a dialog
to add ALT text using a dialog
to replace an image by changing SRC in the code
to add ALT text in code
to resample an image in FrontPage

 Start withClass disk, hector9.htm, resource files

To reduce the loading time you should use images that are already the size you need. With a graphics program you can reduce the size of an image and save it as a new file. In your web folder you will find alternate images that have already been resized.

Each image should have ALT text which tells what the image is or what its function is. You can include descriptions of the image if that is important.

Replace Image: Dialog

In the Image Properties dialog you can change the Image Source.

  1. Right Click Menu:  Picture PropertiesRight click on the photo of Hector and Carla.
  2. From the popup menu select  Picture Properties....

  3. Dialog: Picture Properties | GeneralClick on the General tab. and then the Browse... button beside the textbox Picture Source. The Picture Properties dialog opens.
  4. If necessary, browse to the web hector.

  5. Button: Views | DetailsOn the dialog toolbar, click on the arrow beside the Views button to open the list and select Details to show more information about these files. If necessary, click on the Name heading to sort the files into alphabetic order.

    Dialog: Image - carla2.jpg

  6. Compare the sizes of carla.jpg and carla2.jpg and also other similar pairs of images in this folder.
  7. Select carla2.jpg and click the Open button. Then click on OK to close the Image dialog. In the Picture Properties dialog,  Picture Source: is now carla2.jpg

ALT Text: Dialog

  1. In the Text: textbox, type  Hector and Carla . This is the ALT text that will show in the browser until the image loads. Text reader software will read these words.
  2. Dialog: Picture PropertiesClick on OK. The image replaces the previous one on the page.

  3. Look at the estimated loading time on the Status bar. (This time assumes using a 28.8 modem.) It is now down to 77 seconds from 110 seconds! Quite a difference! This shows why you should always use an image that is the actual size you need.

Replace Image: Code

To change an image you can open HTML view and change the SRC attribute of the IMG tag.

  1. Open the HTML view.
  2. Scroll to the second IMG tag, Ricardo's picture.
  3. Change the file name from  ricardo.jpg  to  ricardo2.jpg .
  4. Ricardo's picture is fuzzy.Switch back to Normal view. Is Ricardo's picture is now fuzzy? It probably is.

    You changed the source but you did not change the dimensions of the image to match the new size. Unless you happened to resize the original image to just the right height and width, the browser will be resizing the image.

  5. Switch back to HTML view and delete the height and width attributes with their values. But, remember their values!

  6. Ricardo's picture is now sharp again.Switch back to Normal view. Ah! Ricardo's picture looks better now.
  7. Switch back to HTML. FrontPage has cleverly figured out what the height and width are and wrote that in the IMG tag.
    Code: <img border="0" src="ricardo2.jpg" width="170" height="212">

ALT Text: Code

  1. While in HTML vies, type  alt="Ricardo"  inside the IMG tag for  ricardo2.jpg . Be careful to leave a space between each of the attribute/value combinations.

    IMG Code with ALT included

  2. Close the HTML view.
  3. Check the load time. It is down to 36 seconds! Three more images to go!

Replace : Drag and Drop

  1. Two sizes of RosaFrom the Folder List, drag rosa2.jpg and drop it beside the existing picture of Rosa. The sizes are close but rosa2 is smaller.
  2. Delete the original picture of Rosa.

Replace Image: Resample from Pictures bar

  1. Select the little picture of the Great Wall of China on your web page. The Pictures toolbar appears.
  2. Click Button: Resample the Resample button. FrontPage accepts the current size and throws away any information not needed for this smaller size. The image will be saved when you save the page.
    WarningWhen you save the page, you will see the Save Embedded Files dialog. If you click on OK, FrontPage will overwrite the existing large picture of the Great Wall with the small version. You can easily lose an original that you need elsewhere at a different size! Changing the name is a good idea.
  3. Click on OK.
  4. Add appropriate ALT text in Picture Properties.


  1. Use the method of your choice to replace pyramids.tif with pyramids2.gif (notice the change from tif to gif!).
  2. Add appropriate ALT text and make sure the code shows the new dimensions. Check the loading time.

    The loading time has dropped to 18 seconds! An acceptable time. Of course, you are not actually finished with the page yet!

  3. Class disk Save  as hector10.htm. When you see the Save Embedded Files dialog, change the name of china.jpg to china-small.jpg and click on OK.