Below is a copy of the tools available within the web builder. Click on each for the relevant help files:
Opens a window to add an image in the current cursor position or to change properties of the selected image
Select the folder where the image is by double clicking on the folder. This opens the folder:
Click on the image that you wish to insert.
You can either click on insert or click the 'Options' tab to the right and then add some text in the 'Screen tip' box. This is the Alt text for the image and will appear when the pointer is over an image on a web browser.
Set your image to float left - the system shows a little representation of how it will look.
You can also add padding around one or more sides of the image and again, it will show a thumbnail to describe your action.
Set to float right.
From here you can browser the image and upload one or more into the folder. The follow the above procedure to select an image and add alt text, as desired. This will add the image at the position of the cursor.
Adding an image / editing an existing image
To edit properties of an image at a later date, right click on it or select it and then click on the corresponding button in toolbar
TIP : Keep to a naming convention when using images. Name them logically, e.g. about-us.jpg or flower1.jpg, as this makes it easier to select and keep track of images as you use them. Keep a logical set of folders e.g. 'navigation' or 'flowers' in the above example and place your images in them as you browser items onto your site. This will help you organise image resources as your site gets larger.
TIP : As a rough rule of thumb, use .jpg images for photographs, and gifs in general for drawings or cartoons. Keep image sizes to a minimum to make the pages as fast as possible. Try to keep image sizes as low and efficient as possible - see the tip below on optimisation. DO NOT use bitmaps produced by paint for example, as these are very large in comparison to jpegs. You will need to 'save as jpeg' and not just add a .jpg after the file name as this does not work.
TIP : If you want an image with a shadow to look good on a coloured background, then use a 24bit png with transparency. Unlike a gif with transparency, shadows will allow the background colour to come through and so you will be free from a while ghosting that can occur around gifs.
TIP: For all images of jpeg or png type, these should be run through image optimisation programmes before uploading. Make sure they are not too large for the page -keep them to the size you require. Secondly, use something like tinypng.com to optimise the image further -simply drag the image over the site and it will remove unnecessary information, without reducing quality displayed. I have often seen this make the image over 80% faster than before using this, particularly with png files which tend tp be fairly inefficient as standard.
Last update: 13.03.2017