WebEd User Guide - Using Images in WebEd

Using Images in Your Website

What Image Types Can I use?

You need to have an image ready before you add it to your template or article. You can use any image software program such as Photoshop or Paint Shop Pro to create, resize, crop, colour etc. your image as required. Save it to your desktop.

Image files can only be in the form of JPEG, GIF of PNG.

Remember to name your images without using spaces; otherwise the image path is likely to break and your image won't be displayed on your website. You can use dashes ( - ) or underscores ( _ ) to separate words within the image name, if necessary.

Image Dimensions

Although images have a strong visual impact and are powerful communication devises, it is advisable to keep image sizes (width, height & file size) to a minimum. The larger the image and the higher the quality, the larger the size of the file, the longer it takes your page to download.

NOTE:

There is the option to resize images in the Image Dialog box by dragging the corners of the image to resize. We do advise that you don't use this option. Even though the image looks smaller on the page, you are not changing the size of the image but merely changing the space on your Web browser allocates for the image. The browser still has to download a large file. If you resize to the correct size in a graphics program prior to uploading you'll change both the image's dimensions and its file size resulting in a much better user experience.

The maximum size of any media asset (image, PDF, video etc) that can be uploaded through WebEd is 200kb, images with a file size above 200kb will need to be upload by FTP to your website. 200k is a substantial size for an image and it is unlikely that you will be required to do this.

Image Quality

All images published in digital media will render at the standard screen resolution of 72dpi. As such, images do not require a higher resolution than this to be published. Larger dpi's will only result in unnecessarily large image file sizes.

Though your Web browser is capable of scaling photos to make them bigger or smaller, it's really not very good at it. A graphics editor like Photoshop or Paint Shop will do a much better job. Resizing the image prior to uploading ensures the browser will load the smaller file, the area it occupies will be smaller and the whole page will load faster for visitors.

How do I add Images?

You must enter the edit mode of the page before insert images.

	Position the cursor at the position where you would like to add the image in the content section.
	Click on the " Image" icon. The following window will be displayed where you select the Source of the image, click the folder icon to select your image.

The Asset manager dialog window will be open. This is opens in the Images folder of your website. All your wesite images are within this folder or it's subfolders and lives on the Customer Community servers.

Initially all images can be uploaded to the "Images" directory and can be accessed via the first drop down box. However, with a large number of images and for ease of use you may wish to create new sub-folders eg: Autumn_range & Winter_range.

To do this, first select New Folder, enter the name and click create.

NB. When creating a new folder, you should not have any spaces in the folder name. Use 'camel alphabet' (e.g., = AutumRangeProducts) or use an _ underscore (e.g. images/Jens_NewWinterRange; and images/Jens_AutumRange, etc.) substituted in lieu of spaces in file naming

Once you have selected the folder for your image. You now need to select an existing image from the directory or click browse to select an image to upload from your computer.

	Select Browse to find the image on your computer
	Select upload to upload this image to the Customer Community server

The image has now been uploaded to the selected folder, and is ready to be inserted to your web page. You should be able to select the image in the list on the right hand side. Please make sure you are in the correct folder. Select the image and click ok to return to Image Dialog window.

Add details to the Image

NB. Before inserting the image it is important to include a description of the image relevant to the content in the Title field. This not only ensures that when a user rolls over the image the title appears in title box but more importantly, the image title tag is weighted heavily by Google, and can go a long way to improving rankings on pages with little content.