HTML Basics:
Icon: FrontPage Express 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. Unfortunately you must use a graphics program, like PaintShopPro or Adobe Photoshop or Microsoft Image Composer, to resize images. FrontPage Express cannot do this for you.

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
    FrontPageTo subtopics OR Icon: FPXFPX Arrow - Subtopic open
            icon-footprintInsert Image
            icon-footprintMore Images
            icon-footprintInline Images
            icon-footprintReplace Image
            icon-footprintImage Link
                Align & Space
            icon-footprintAlign Images
                Image Issues
            icon-footprintSave to New Location
            icon-footprintSave Non-Web Image
    FormattingTo subtopics
    TablesTo subtopics
    ConvertTo subtopics
    ExercisesTo subtopics


Icon Step-by-Step

Step-by-Step: Replace Image in FPX

 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
to add ALT text in code

 Start withClass disk, Icon: FPX 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:  Image PropertiesRight click on the photo of Hector and Carla.
  2. From the popup menu select  Image Properties....

  3. Dialog: ImageClick the Browse button beside the textbox Image Source. The Image Properties dialog opens.
  4. Click on the Browse button of the Image Properties dialog and the Image dialog appears, showing the contents of the web folder. If necessary, navigate to the folder that holds your resource files for this project.
  5. On the dialog toolbar, click on Button: Details the Details button 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 Image Properties dialog,  Image Source: is now carla2.jpg

Add 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: Image 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 92 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.
  3. Change the file name from  ricardo.jpg  to  ricardo2.jpg .

Add ALT Text: Code

  1. Type  alt="Ricardo"  inside the IMG tag for  ricardo2.jpg . Be careful to leave a space between each of the attribute/value combinations.
  2. Close the HTML view.
  3. Check the load time. It is down to 35 seconds!

Replace the Rest

  1. Use the method of your choice to replace rosa.jpg with rosa2.jpg, pyramids.gif with pyramids2.gif, and china.jpg with china2.jpg.
  2. Add appropriate ALT text for each image. Check the loading times after each replacement.

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

  3. Class disk Save  [hector10.htm].