HTML Basics:
Icon: FrontPage Express Image Issues

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

Once you start to add images to your page, you may run into some problems involving:

  • the path FPX creates for SRC

  • image from another site

  • image formats

  • image backgrounds

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:

  • Save the page!
  • Copy the image to the same folder as the page.

What happened:

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!

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


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.

Paths that FPX creates:

Location of image:


Image is in the same folder as the htm file.


Image is in the images subfolder of the folder that holds the htm file


Image is in  the images folder which is at the same level in the folder tree as the folder that holds the htm file.



Image is on a different drive from the htm file.


Image is on an Internet site.

Tip ../ 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:

  • Practical - The download of the page will be slower since the browser has to connect to a different site for the image.
  • Practical - The image may be moved at any time, breaking your link. 
  • Legal - You are stealing bandwidth from the other site - that they are paying for.
  • Legal - You may be stealing a copyrighted work.

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.

Bird image squashed horizontally

Image converted by FPX

Bird image - transparent and correct width & height

Image converted by PaintShopPro

Problem: Image Backgrounds

Problem: Image has background which you want to be transparent.

A transparent background, like the bird above on the right, allows the page background to show through around the image.

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.

lion.htm Clip Gallery | Animals| Lion.wmfImages 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.

Icon: Left mouse click Click on the lion in the illustration to the right.