We’re here to help! Email us here.

Tutorials

loading...

Optimizing the pictures you add to your site

Compelling graphics and images can significantly enhance your site. However, they can cause problems if they are too large. Large images can cause delays in opening, uploading, saving, previewing, publishing and viewing your site. This will be a source of frustration to you, and your site visitors.

Large images will cost you traffic to your site. If your page takes more than 10 seconds to load, your visitors will run away faster than you can say "back button" (tools.pingdom.com).

Web friendly images should be between 20KB and 100KB each, depending on how many you have on a page. You can see the file size displayed below the preview of the image in your File Manager.

To help resolve this issue, you can use the Picture Widget to optimize the images on your page. When you upload your image to the File Manager, the original image is stored in the File Manager. The optimization of the image only takes place when added to the page using the Picture Widget.

When the image is added to the page, there is a toggle button that allows you to turn the Optimizer "On" or "Off". If your image is already uploaded, and you want to edit it, you can locate the toggle by clicking on the "Edit" link on your Picture Widget. The toggle button is located at the bottom of the dialog box.

  • Optimize "On" means image optimization is turned on for the image and the image will now load faster on your page.
  • If the button is set to "Off" then your original sized image is displayed on the page. If the image displayed is too large on the page, you can simply drag and resize the image to your preference.
User-added image

You can view your new optimized image by previewing the page or republishing your site. Optimizing your images can drastically improve the load time of your images on your pages.

If you use the Text Widget to add images to your page, your images will not be optimized. The optimization of images can only be done when using the Picture Widget and if it is turned on. If you add the image using the Text Widget to your page, then your original image is displayed on the page.

If you don't wish for your images to be optimized and you wish to use your original image on your page, you can use the following:

  1. You can add the image to the page using the Picture Widget and turn optimizer "Off". You do this by clicking on the "Edit" link on the Picture Widget and selecting the "Off" button under "Optimize".
  2. Add the image to your page using the Text Widget.
  3. Create thumbnail pictures and then link to the original images you have already uploaded in the File Manager:
  • Add the thumbnail picture to your page in the Sitebuilder using the Picture Widget.
  • Click on the "Edit" link on the top left-hand corner of your widget.
  • Click the "Choose A Link" button.
  • Select "File stored in the site".
  • Click "Browse" to locate your file.  
  • Click "OK".
  • Click "Save" to save your changes.
  • Republish your site. 

 


You also have the option to use Aviary within the Sitebuilder or an Image Optimization Tool to resize your images before adding them to your page.

Using Aviary:

1. Go to Site > Content > File Manager.

User-added image

2. Hover over the image and click on the pencil icon at the bottom left corner of your image. Alternatively, you can right-click on the picture and select "Edit with Aviary". Both options will take you through to the photo editing dialog box.

User-added image

3. Once Aviary's open, click on "Resize" to adjust the image to your liking.

User-added image

4. Enter your new dimensions. If you wish to retain the proportions, the lock icon needs to be blue. If you wish to enter your own custom dimensions, click on the lock icon to unlock this and it turns gray. Then enter your desired dimensions.

User-added image

5. Click on "Apply".
6. Click on the "Save" button.

 


Using an Image Optimization Tool:

You can use the following Image Compression Tool to optimize your image. Simply upload your image, compress and download the smaller compressed image. Then you can upload this smaller image to your file manager and add it your site.

If you have access to image editing software such as Photoshop, you can use their "Save for web" function and this will automatically optimize your images and save them in a web-friendly format.