HTML Basics:
Image Issues

español
Did you want IE9+, Chrome, Firefox; Notepad?

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
src="file:///A:/my%20docs/web/mail.gif".

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 Basics

Project 2: HTML Basics
    HTML Code
    About HTML
    What You Need
    Code by Hand
    WYSIWYG
    FrontPage/ FPX
    Images in HTML
    FrontPage OR FPX
            Insert Image
            More Images
            Inline Images
            Replace Image
            Image Link
                Align & Space
            Align Images
                Image Issues
            Save to New Location
            Save Non-Web Image
    Formatting
    Tables
    Print
    Convert
    Summary
    Quiz
    Exercises

Search
Glossary
Appendix

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:
src="mail.gif"	Image is in the same folder as the htm file.
src="images/mail.gif"	Image is in the images subfolder of the folder that holds the htm file
src="../images/mail.gif"	Image is in the images folder which is at the same level in the folder tree as the folder that holds the htm file.
src="file:///A:/my%20docs/web/mail.gif" src="file:///D:/clipart/mail.gif"	Image is on a different drive from the htm file.
src="http://www.jegsworks.com/mail.gif"	Image is on an Internet site.

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

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.

Clip Gallery | Animals| Lion.wmf Images from clip art collections may have transparent background or solid background, usually white. But it can be hard to tell which.