In this guide, we will cover the three different ways you can add images to your liveedit website and how to optimize them. 

In This Article:

Optimizing Images

Before uploading images to your liveedit website, please consider the following optimizations: 

  • Make sure the image file is either a .PNG or .JPEG file format. 
  • Remove any special characters ( *, $, ( ), %, &, @ ) from the file name. 
  • Large image files can negatively impact the load times of your website. If your image file is over 1MB in file size, please try running it through an online image compressor such as https://compressor.io or https://tinypng.com. 


Image Element

The most common way to add an image is using the Image Element. You can either click on an already placed Image Element (see below) or drop in a new one (Guide: Adding Elements).

Placing a new Image Element


Replacing an Existing Image Element


Free Stock Images!

You can access free stock photos from the Stock Photos tab!


Tips:

  • Images placed with the Image Element will span the full width of the Content Area by default.
  • The overall size of the image is limited to the size of the Content Area.
  • If you delete a placed Image Element, the image file remains within your File Manager to be used again.
  • The Edit This Image button will open our built-in image editor.



Background Images

Background Images are set through the Properties of a Content Area. Any additional content you add to the area, such as Text, would appear over the Background Image. This is a great way to create regions or separations between content.  

Please Note: We do not recommend adding Background Images if you do not plan to add additional content to the Content Area itself.

Tips:

  • The overall size of a background image is based on a few factors:
    • The width is limited to the width of the Content Area. 
      • In the example above, the background was added to an area that spans the full width of the website. 
    • The height is limited to the amount of spacing added within the properties of the Content Area or content (such as text placed via a Text Element) added into the area itself. 
      • In the above example, the spacing is coming from both spacing and text. 
    • On smaller devices, Content Areas will be much smaller, so less of the overall image will appear. 
  • When adding background images that would span the full width of a page, we recommend using an image with a landscape (horizontal) orientation and be at least 1200px in width.
  • Setting the Image Size to Cover works best for most images. This will ensure the images span the entire Content Area.
  • The Image Position option tells the system what position to start displaying the image from. We recommend trying out different options to see what works best for your image. For example, if you pick "Bottom Center", the image will start displaying from the bottom center and expand outwards to fill the content area.
  • You can set different properties per device (Desktop, Tablet, Mobile), and is great for the following:
    • If you set the Image Scroll option to Fixed, please make sure to set this option to Scroll on just Mobile. We recommend this as iOS browsers do not currently support fixed background images.If you are setting a large value for Padding or Margin under the Spacing tab of a content area to make your background image bigger, make sure to reduce it from Mobile, as mobile devices have limited screen sizes.


Text Element

Images added with the Text Element will appear with a Content Area similar to the Image Element. The Text Element, however, gives you the option to add images inline with text and more control over setting the size of an image. You can either click on an already placed Text Element (see below) or drop in a new one (Guide: Adding Elements).

Tips:

  • To float an image alongside your text, highlight one of your images then select one of the Align options.
  • If you set the width to 100% in the first dimension box and leave the second one blank, the image will automatically span the full of content area.