Q: I have imported some large PNG images and now my site seems very slow. Why is this?
A: PNG files are not an appropriate format for large images. PNG files are best used for small graphics where you need transparency. You should try to use JPEGs where possible. For an 800 x 600 image the difference between a JPEG may be 90% smaller than a PNG without appreciable loss of visual quality.
Q: Why does my PNG file not work properly?
A: Check that your PNG is a RGB format image. We support 24bit and 32 bit PNG files. We do not support 8 bit PNG files. For best results we recommend you use Photoshop's 'Save for web and devices' option to create the files.
Q: What size should my images be?
A: Images should be less than 1200 pixels wide. For best performance always use 72 dpi images and scale them to the correct size in Photoshop or some other image editor before you import them. If you import a large image in to your editor and then scale it down the image still retains it's full file size and this may make your web page slow to load.
Q: Can I use GIFs?
A: The editor does support GIFs but we recommend you do not use this format. Unless you need animation, use JPEG instead. If you do need to use GIFs, avoid scaling them within your editor.
Q: Is there a limit to how many images I can upload?
A: No, there is no limit. You can upload as many images as will fit within your storage allowance. Demo accounts have 10Mb of storage space, paid-for accounts have 1Gb or more.
Q: How many images can I upload simultaneously?
A: You can upload up to 5 images in a single go.
Q: Can I place one image on top of another?
A: You may be able to use the Background Widget to do this.
Importing an image
Select the MEDIA (1) tab and then click ADD (2) to add an image.
You can import JPEG or PNG format images. Generally it's best to use JPEG for photographs and PNG for graphics.
Note 1: If the Add Image button is not visible, this may indicate you need to re-install Adobe Flash player. Logout of the editor, go to http://get.adobe.com/flashplayer/ and follow the installation instructions.
Note 2: IE6 does not support PNG transparency. If you want IE6 compatibility do not use PNG transparency.
If you want to import more than one image, Cmd-click (Mac) or Ctrl-Click (Windows) to select multiple files.
You can import up to 5 images in a single upload. This is not a limit on how many images you can upload to your page, it is just a limit on the number of images that can be imported at one time.
The image in the editor
The new image will appear in the image panel (1). You can click on the info icon (2) to get the image URL
Drag your image on to the page to use it.
Positioning an image
Click and drag within the image (1) to move the image. Do not click on the borders or the handles (2).
The image will not move if the settings panel is open. Use the close button (3) to close the panel
Scaling an image
Click and drag on any of the handles to scale the image
The image will not scale if the settings panel is open. Use the close button (1) to close the panel.
Use the columns layout widget to place images or any other widget alongside each other, or you could just drag one image by the side of other and the column will appear.
You can only place 6 elements in each row
The image settings
1. Image replace - use this to replace the selected image with another one
2. Image settings - use this to open the settings panel and add a link, alt tag, title tag, rollover or lightbox to an image
3. Image resize - rest an image back to original size
4. Image drag handle - drag an image to a different row
5. Image delete - remove image from page without deleting it from media tab
The images panel
1. Use the Alt Tag field to provide an alternative description of your image. This will be displayed in browsers that can not display the image (e.g. a mobile phone browser) and is important for accessibility with speech reading devices.
2. The Title Tag field can be used to give the image a title. This may be displayed in search engines.
3. Click the Reset button to reset the size of the image
4. Click the Aspect ratio button so you can make changes on the height or the width of the image. If you lock this function you can change both height and width at the same time.
5. Drag an image onto the rollover target to create a rollover.
6. Drag an image onto the lightbox target to create a lightbox. When clicked on, the image will open in a new window. Note: this can only be tested in Preview mode. It will not work in the site editor.
7. To add a link to an image click the Add Link button.
8. To remove a link click Clear Link.
9. Set and copy the image url to use it as you want
10. The nofollow attribute can be used to mark those images you do not wish search engines to list on their results
11. The Asynchronous Loading is mostly used in websites that have a long list of images and rather than loading all the images at once, we see them load when we try to view them by scrolling down.
Adding a link to an image
Click on the Add Link (1) button on the settings panel
If the link is to a page on the same site use the Internal link menu (1). To link to an external page, paste the URL into the External link field (2). If you want the link to open a new window, use the Link Target menu (3).
Image lightbox and rollover
For this example I have uploaded 3 images:
Milk 250x250 - This will be the image I'll add to my page. We advise our users to reduce the size of their images to the size they need them to be on their websites, otherwise it will take them a long time to load.
Milk 250x250 Black&White - This is the same image as before with the same size, but in black and white. I will use this image to make the rollover.
Milk 800x800 - This is the same image as the first one in color, but with an increased size. I will use this image to make the lightbox.
Start by dragging the small coloured image to your page (1) and click on the settings icon (2).
Drag the small black and white image to the first box. After doing this, when you are in Preview or Live mode and you move your mouse over the original image, you will see the black and white photo.
Drag the larger image to the second box to create a lightbox. When you go to Preview or Live mode and click on the image a pop up will show you the larger image.
This is an example of a Lightbox image. You will need to be in the Preview mode to test these options.