HTML Basics:
Icon: FrontPage 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 FrontPage creates for SRC in the IMG tag

  • using an image from another site

  • image formats

  • image backgrounds


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
    WYSIWYG
    FrontPage/FPXTo subtopics
    Images in HTMLArrow - Subtopic open
    Icon: FrontPage FrontPage Arrow - Subtopic open OR FPXTo subtopics
    icon-footprintInsert Image
    icon-footprintMore Images
    icon-footprintInline Images
    icon-footprintReplace Image
    icon-footprintImage Link
        Align & Space
    icon-footprintAlign Images
        Image Issues
    icon-footprintSave Page
    icon-footprintEdit/Convert Image
    icon-footprintPictures Bar
    icon-footprintPublish Web
    FormattingTo subtopics
    TablesTo subtopics
    Print
    ConvertTo subtopics
    Summary
    Quiz
    ExercisesTo subtopics

Search 
Glossary  
Appendix

Problem: Path for images outside the web

Dialog: Save Embedded FilesWhen you insert an image, FrontPage must write a path in the SRC attribute of the IMG tag. It does not squawk if the image is not in the web.

FrontPage will use a relative path for images on the same disk as the web (like ../../images/books.gif) and an absolute path for images on other disks (like e:\multimedia\webdividers\bluerule.gif).

When you save the page, the Save Embedded Files dialog will prompt you to save any images that are not already in the web.

The default is to place the image in the folder with the page. If you want a different folder structure for your images, you will have to change the folder for each image.

WarningIf the image was in a subweb of your site and you chose Rename or Change Folder..., the image may be moved and the path in other pages that use the image will be changed to match. This may cause unexpected problems later.

Solution: Copy an image to the correct folder in the web before you insert it on a page.

Problem: Broken links after copy or publish

It is still possible to wind up with a path to an image that is not in your web. Once the page is uploaded to a web server or a different computer, that path will no longer work. Broken image!

Problem: When you save your page or the web to a new location, the path to the image breaks.

Solution:

  • Before you add an image to a page in FrontPage, import or copy the image into the web.
  • Always check the Hyperlinks report for paths that point to hard drive or floppy drive locations outside the web before you publish
  • Do not use Explorer or my Computer to move or copy files into webs, especially when the web is open in FrontPage.

How could this happen?

Basically, you did not let FrontPage manage the files so it could change the names and paths. Here are some ways this can happen:

  • Uploading pages with FTP instead of using FrontPage to do the upload.

  • Copying a page from a disk and pasting into web in Explorer instead of FrontPage

  • When prompted by the Save Embedded Files dialog, choosing Don't Save by accident.

How the Source Path Works

What FrontPage writes as the path for the source SRC for an image depends on where the image is compared to the HTML page location.

Type of path:

Example:

 Used when the image is:
Filename:

src="mail.gif"

in the same folder as the page.
Relative path to subfolder:

src="images/mail.gif"

 in subfolder of the folder that holds the web page.
Relative path to folder higher in folder tree:

src="../images/mail.gif"

 in folder which is at the same level in the folder tree as the folder that holds the web page.
Absolute path:

src="file:///A:/my%20docs/hector/mail.gif"

src="file:///D:/clipart/mail.gif"

 on different drive from the web page
URL:

src="http://www.jegsworks.com/mail.gif"

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: Using 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 or renamed 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.

WarningImages 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: Converting & Resizing Images in Non-Web Formats

FrontPage can accept images in many formats which browsers cannot display. When you save the page, FrontPage converts the image to GIF or JPEG format. FrontPage 2002 is much better at converting images than previous versions. The image may still not look like the original, however. Resizing most images with the handles can make them jagged or fuzzy.

Problem:  Image resized or converted by FrontPage does not look like original - smoothness, dimensions, colors, transparency.

Solution: Use a graphics program or a graphics converter to resize and change the original image's file format. There are more options in such a program.

Example: The image of a bird below was originally in wmf format with a transparent background. After FrontPage inserts it, the image is 76 x 76 pixels and has a white background. You resize the image to enlarge it to 200 x 200 on your page. The image is now jagged. When you save the page and FrontPage converts the image to transparent gif format,  but you still have a jagged image.

The original wmf format allows the image to be enlarged and still have smooth edges.  Resizing with software that is designed for this format would be the best choice. Second best is using a graphics program, like PaintShopPro, that gives you a choice of what resolution to use when opening the image. You can choose 200 x 200 and then save it as a transparent gif. The result has very lovely edges.

Bird image squashed horizontally

Image converted by FrontPage

 Bird image - transparent and correct width & height

Image converted by PaintShopPro

Problem: Making Image Backgrounds Transparent

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

A transparent background, like the bird above, allows the page background to show through around the image. Only GIF images can have a transparent background, not JPEG.

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.

Solution 3: Icon: FrontPage In FrontPage 2000/02, you can use the Button: Transparent color Transparency wand on the Pictures toolbar to select a transparent color.

Problem: Is Clipart Transparent?

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