Step-by-Step: Replace Image in FPX
|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
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
click on the photo of Hector and Carla.
- From the popup menu select
the Browse button beside the textbox Image Source. The Image
Properties dialog opens.
- 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.
- On the dialog toolbar, click on
Details button to show more information about these files. If
necessary, click on the Name heading to sort the files into alphabetic
- Compare the sizes of carla.jpg and
carla2.jpg and also other similar pairs of
images in this folder.
- 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
Add ALT Text: Dialog
- 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.
on OK. The image replaces the previous one on the page.
- 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.
- Open the HTML view.
- Scroll to the second IMG tag.
- Change the file name from ricardo.jpg
to ricardo2.jpg .
Add ALT Text: Code
- Type alt="Ricardo" inside the IMG
tag for ricardo2.jpg . Be careful to leave a
space between each of the attribute/value combinations.
- Close the HTML view.
- Check the load time. It is down to 35 seconds!
Replace the Rest
- Use the method of your choice to replace rosa.jpg
pyramids.gif with pyramids2.gif, and
china.jpg with china2.jpg.
- 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!