Tutorials

Optimizing images 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 leave your site. You can check the speed of your site loading using this tool: 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 a 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 a 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 Edit 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 a Text widget to add images to your page, your images will not be optimized. The optimization of images can only be done when using a Picture widget and if it is turned on. If you add the image using a 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 a Picture widget and turn optimizer Off. You do this by clicking Edit 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 a Picture widget.
  • Click Edit on the top left-hand corner of your widget.
  • Click Choose A Link.
  • Select File stored in the site.
  • Click Browse to locate your file.  
  • Click OK.
  • Click Save to save your changes.
  • Republish your site. 

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.

It's easy to take your business online with Yola.