Here is a step by step guide to download (with screen shots) to help you. Alternatively, you can just read the information below (without screen shots)
Images
Images are a great idea to have in a page if you have alot of content as this will break the content up and make it more appealing to read. It is important to consider that image types can severely affect a users loading time and an efficient file type for the particular image should be chosen.
Image Preparation
The WYSIWYG editor can only support the following formats:
- .jpg / .jpeg - If the image has a lot of colour or gradient, but no transparency. The preferred format for uploading photos.
- .png - Preferred format for 8 bit and 16 bit with a lot of colour, gradient and transparency. Complex images may result in a higher file size.
- .gif - Most effective for images that have few colours and little or no gradient e.g. primary colour logos. Ineffective for detailed images colour heavy images such as photographs.
The ideal size of an image is under 100kb, if it's a little bigger it doesn't matter, it just starts slowing the page down. However, try not to go over 500kb. If you have lots of images on one page - it will really slow down the load time, which can be unpleasant for the user and the search engines.
It is preferrable to resize your image to what you expect to appear on your website before you upload it. We recommend your standard computer resizer such as Microsoft Office Picture Manager. Choose the image from your computer, right click and open with "Microsoft Office Picture Manager", from "picture in the menu" choose resize or crop. Then click OK and save.
Inserting an image in the WYSIWYG
- Make sure that you are logged in.
- Go to the page that you want to add an image.
- Click on Edit.
- Place your cursor in the "Body" where you want to insert your image.
- Click on the "Insert/Edit Image" button.
- A new window will open "Image Properties" click on the "Browse Server" in the top right side of the window.
- A new window will open. This is the server location where your uploaded images will be kept. You need to upload the image from your computer to here.
- Click "upload" in the left corner. Then Browse to choose from your computer which image.
- Click "Browse" you can now choose the image that you want to upload.
- Highlight the image and click "open".
- This will return you to "File Browser" window, Click "upload".
- Once uploaded the image will appear in the list of uploaded images.
- The image you have just uploaded should be highlighted in the list. Hit the enter button to confirm your choice of image.
- You will now return to the insert box.
- You should set up the properties of your image at this point. If you forget to do this first time, you can highlight the image click insert button again and repeat this process.
- If the image has already been resized (which is preferable, as per above) leave the width and height. If you need to change the size of the image after it's been uploaded, this is where you can choose the dimensions.
- If you would like a border on your image choose in pixels the width, a good size is 10.
- Horizontal and Vertical space allows the content to wrap around the image, putting a value in these fields is important if you also have text on the page. We recommend 5 or 10 pixels. You will see the white spacing get larger around the image in the text box before you click ok - readjust the pixel sizing if you need to.
- To align where you would like your image to sit in relation to the cursor position, we recommend you choose either left or right of the page.
- Click Ok and the image will appear in the "Body".
- Click "Save" at the bottom of the web page.
- The image will now be inserted on your page where your cursor was.
Before you upload an image you need to ensure that it is in the correct format.
Additional Tricks
When you insert an image you may notice that the image can be a little hard to get in the right spot. You are able to work around this quite easily.
- Getting an image to line up with the top line of text - Click to the right of the top line of text and hit enter. Click on the image and drag it until you see the cursor bar hit the new top line and let go of the mouse.
- Getting an image to move to a certain position - Use your alignment affects to guide your image to your desired location.
- To make your next line of text go directly underneath your previous line of text - Hit shift + enter to avoid creating a new paragraph.
The WYSIWYG editor also provides the ability to resize the image dimensions from within the website. Ideally resizing and cropping should be done before uploading the image online. This is because the website user is still actually downloading the full image; it is just resized within the browser which means the user is downloading a file that is larger than it needs to be. With in most browsers the image will appear to be lower quality when not viewed at 100% of its original size. Conversely if the image is original smaller than the desired resize, some pixilation or image degradation will occur.
