Image Types

HTML code used on the web recognizes two basic graphic formats - GIF and JPEG. All the images on your web page must be either of these formats.

  • JPEG (Joint Photographic Exchange Group) - As a general rule, photos should be saved as JPEGs. This file type consists of 16 million colors.
  • GIF (Graphic Interchange Format) - These files contain 256 colors or less and should generally be used for non-photo graphics. All of the images on these tutorial pages are saved in GIF format.

Inserting a Graphic

To add a photo or graphic to a web page, select Insert|Picture|From File from the menu bar. Choose the file and click OK.

Picture Properties

To change the properties of the picture, select the image and choose Format|Properties from the menu bar.

[Picture Properties dialog box]

Below Alternative representations, type a description of the image in the Text box. This text will appear in place of the graphic if the user browses your site with graphics turned off on their browser and will also be displayed while the picture is loading.

Click the Appearance tab.

[Picture Properties dialog box]

  • Change the Alignment if the picture should be aligned to the right or left of the text on the page or if it should be centered on the page.
  • Border thickness will add a border to the picture depending on the number of pixels you enter. Leave this value at "0" if there is no border on the picture.
  • Horizontal spacing and Vertical spacing are measured in pixels and will add white space surrounding the picture either above and below (vertical) or on both sides (horizontal).
  • FrontPage automatically calculates the size of the image. However, if you would like it smaller or larger than actual size, check the Specify size box and enter the new Width and Height values. Please note, it is recommended that you change the actual size of the image in an editing program such as Adobe Photoshop instead of changing these values, particularly if the actual size is large and you want it to appear smaller on the screen. Resizing the actual size of the graphic will lower the download speed of the image.