Adding images to your pages

Loading Pictures

It is recommended that all images used be either JPEG, GIF or PNG. Other formats may appear to work but will have problems with some browsers and will be slow to download. JPEG is best for photos in that it compresses to a smaller size and yet shows in better quality. 

GIF and PNG are better for graphics and can be created with a transparent background so that they sit nicely over the website background.

To Upload and Insert an Image

First click within the Edit window at the position where you want to insert the image.

Click on the 'insert/edit image' icon

The first line within the General Tab is 'Image URL'.

Click on the browse button and a new browse window will come up. It will show any images you have already uploaded.

At the bottom of this browse window is a section where you can upload pictures and other files to the server. Use this to browse your local files and to upload them to the webserver.

 

When your image has been uploaded click on the 'add' at the far right of the name and you should now have returned to the 'insert/edit image' dialog of TinyMCE with the image URL filled out.

Fill out Image Description and Title with a description of the image. While you should incorporate keywords for search engines in this it should be a readable sentence or paragraph description.

The Image Description is very important. This creates the ALT attribute for the image. This is seen 'under the image' before the image loads or if it doesn't load and is used by visually impaired users. Search engines such as Google take particular note of this in creating keywords.

You can look at the appearance tab if you want to have your image aligned to the left or right of your text.

If you going to use the image as a link, many browsers will show the image with a border to indicate the link. If you don't want this border then you should place a 0 in border field.

Centering an Image

It seems strange that while HTML has direct attributes on images to allow them to be positioned to the left or right, it has never had a direct attribute to position an image in the center of its window.

The correct method (see http://www.w3.org/Style/Examples/007/center ) is as follows:

1. Select the Image and click the Image Button. Ensure that you have not set the Alignment parameter within the Appearance TAB of the Image Button.
2. Select the Image and click the Edit CSS Button. . On the Block TAB, for the Display parameter select 'block' then click on the Apply button at the bottom.
3. Still within the Edit CSS, on the Box TAB, unclick the 'same for all' within the margin box. Beside 'right' type auto. Beside 'left' type auto. These are also within the margin box. You can leave the next column set at pixels as this will not be used with the auto parameter. Now click on the Update button at the bottom.

The image should now be centered.