Once you start to add images to your page, you may run into some problems involving:
Problem: Path for SRC
FPX tries to do a lot of your work for you. Sometimes it's not as smart as it thinks it is!
Problem: When you save your page to a new location (like to a web server), the path to the image breaks.
Solution: Before you add an image to a page in FPX:
When you insert an image with FPX, FPX writes a SRC path to the image. A handy feature!
If the image is on a different drive from the
HTML file, FPX will write a full path, like
When you save the page to a web server or another computer, FPX does not copy the image and the full path remains the same. But now the full path points to a location on that server or other computer. Broken image!
Project 2: HTML Basics
How the Source Path Works
The path that FPX writes as the SRC for an image depends on where the image is compared to the HTML page location.
../ means to go up one level in the folder tree.
%20 is a code for a space in the folder or file name. Many web servers cannot handle spaces in filenames, so spaces are not allowed in URLs. Browsers automatically insert this code when you type a space in a URL.
Problem: Image from Another Web Site
Some web page authors link directly to an image at another site instead of having a copy of the image on their own site. There are several things wrong with this:
Images on web pages are not free for you to use... unless the web site says they are. For copyrighted images you must get permission even to make a copy.
That said, the folks who actually get in trouble for this are usually claiming the images as their own or else making money from them in some way. People who create useful or beautiful images spend a lot of time and effort on them. Respect their work!
Problem: Poor Conversion of Image
FPX can insert an image which has a format that browsers cannot display. It converts the image to GIF or JPEG format. The image may not look like the original, however.
Problem: Image converted by FPX does not look like original - dimensions, colors, transparency.
Solution: Use a graphics program or a graphics converter to change the original image's file format. Bonus - You can resize at the same time.
Example: The image of a bird below was originally in wmf format. After FPX inserts it, the image looks squashed and speckled and has a white background where it was transparent. With the graphics program PaintShopPro, the same image can be saved as a transparent gif. It retains its shape and colors and transparency.
Problem: Image Backgrounds
Problem: Image has background which you want to be transparent.
Solution 1: Use a graphics program or graphics converter to save the image as a transparent gif.
Solution 2: Make the page background the same color as your image's background.
Images from clip art collections may have transparent background or solid background, usually white. But it can be hard to tell which.
Is the lion image transparent or does it have a white background??
You have to try it out to find out.
Click on the lion in the illustration to the right.
~~ 1 Cor. 10:31 ...whatever you do, do it all for the glory of God. ~~