Using images in SiteBuilder
Images can be very effective at grabbing visitors' attention and drawing their eye to the content you want them to see - but this works best if they're used correctly!
The size and shape of images - height, width, and download size - are all key things to consider.
In this article:
Image resolution
An image's resolution refers to its height and width in pixels. As a general rule, images shouldn't be larger than the space they take up on your page - so if you want an image to take up half the width of your SiteBuilder page, it doesn't need to be wider than about 600 pixels.
Tip: If an image you're uploading is wider than a SiteBuilder page's standard width (1170 pixels), you'll be asked if you want to resize it:
We recommend that you resize large images when prompted.
If you want to offer a high-resolution version of an image for download purposes, it's best to also upload a low-resolution version of the file for use on the page. This will load more quickly and can link to the file for download.
Image orientation
Orientation refers to the relative height and width of an image - for example, an image that's wider than it is tall is usually called landscape, and one that's taller than it is wide is portrait:
Choosing an image with the right proportions to fit your content will greatly improve the appearance of your pages in SiteBuilder.
File size
An image's file size is how much space it takes up on your computer's hard drive - or on a web server. An image with a small file size will download more quickly than one with a large file size.
To reduce the file size for an image while maintaining its resolution and orientation, we can use image compression when saving the file in our image editing software like Photoshop. Alternatively, there are a number of free tools online that can compress an image for you:
If you over-compress an image, you'll start to see the quality degrade, so you'll need to balance file size and image quality:
