Optimizing the pictures you add to your website

Note: This article refers to the legacy version of the Website Builder. If you signed up to the HostPapa Website Builder after March 11 2020, you’re on the new version of the Website Builder. For help, go here.

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.

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, 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 it 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.

You can view your new optimized image by previewing the page or republishing your site.

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 its 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:
    1. Add the thumbnail picture to your page in the website builder using the Picture Widget.
    2. Click on the Edit link on the top left-hand corner of your widget.
    3. Click the Choose A Link button.
    4. Select File stored in the site.
    5. Click Browse to locate your file.
    6. Click OK.
    7. Click Save and republish your site.
Optimizing the pictures you add to your site

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

Using Aviary:

  1. Go to Site > Content > File Manager.
  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.
  3. Once Aviary’s open, click on Resize to adjust the image. 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 it (it will turn gray). Then enter your desired dimensions.
  4. Click on Apply.
  5. Click on the Save button.
Optimizing the pictures you add to your site - using aviary

Using an Image Optimization Tool:
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.

Related Articles

Get online with our affordable web hosting

Get online with our affordable web hosting

Learn more now
HostPapa Mustache