Image Size Guidelines

Overview

Each time you upload an image, the website builder creates up to 5 reduced-size copies of the image. The builder will then automatically insert the appropriately sized image into the desktop, tablet, and mobile websites, making sure your site visitors always see the correct sized image for their device.

Guide

Optimized Image Sizes per Device

The builder will not increase the size of an uploaded image and will only create images that are smaller than the original uploaded image.

For example, if a 2000px width image is uploaded, 5 new optimized copies will be created. If a 100px width image is uploaded, no new images will be created.

Maximum Image Size

The total area of an image cannot exceed 3,145,728 pixels. It is unlikely any of your images will be over this limit, but you can quickly check by multiplying the pixel width by the height.

Image Size Guidelines per widget

Slider

The slider widget is normally used with larger sized images for dramatic effect. Sliders commonly stretch from end to end, so it's good to use images with more width to fit the slider. For "square" sliders, use an even aspect ratio such as 1:1. 

It's best to choose images with good padding so that the main content of the image is not cut off when resized. The image ratios should be the same in the slider for design consistency

• Common aspect ratios: 16:9, 3:4

• Common resolution sizes (px): 1600x900, 1280x720, 1280x960

Device specific notes: Mobile devices often have the opposite aspect ratio compared to desktop devices. You may have to use the hide on device feature to display mobile sliders correctly.

Gallery

The gallery widget is the most flexible widget to use with images, just because there are so many layout options. For example, you can have a tiled gallery which is the same size for all images, or mosaic which is a different size per image.

The aspect ratio of images in the gallery should reflect how you want it to display.

• For example, square style galleries should have 1:1 ratio of images.

• Tall image style galleries should have longer height ratios, like 2:5, or 200px by 500px.

The image ratios should be the same for design consistency. Leave some padding in the image if you wish to use the "hover" effect so that your images don't get cut off.

• Common aspect ratios: Any aspect ratio.

• Common resolution sizes (px): Any resolution, but not larger than 1500px for page speed.

Icons

Icons are a very important part of any site. They are visual markers for information and can add a modern look to your site. You can use transparent PNGs, JPEGs or SVGs.

• Common aspect ratios: Generally 1:1, but any aspect ratio will work.

• Common resolution sizes (px): 200x200, 80x80 or any resolution. SVGs can be any resolution.

Favicons

Favicons aren't used on your actual site, but rather it is what is displayed on the tab when users open your website.

• Required aspect ratio: 1:1

• Allowed resolution sizes (px): 24x24, 36x36, 48x48

Aspect ratio vs Resolution

Aspect ratio is the "ratio" of an image's width and height attribute. A 16:9 aspect ratio can be a 16x19 px image, or a 1600x900 px image. It's basically any image resolution that has the ratio of 16:9.

Different aspect ratios per device

While the website builder optimizes images on your site, it does not actually resize the design of images on your site. If you use an image on the desktop that has an aspect ratio of 16:9, it will look perfect on the desktop since a desktop device is wide. A mobile device, however, is much smaller, and so a 16:9 aspect ratio will sometimes look small.

To compensate, you can either use the hide on device feature to create specific versions for those devices or you can resize the image's dimensions to fit - changes to size are device independent.

Considerations

Biggest is not always the best

Uploading the biggest resolution for your site will guarantee that your site's images are high resolution for your clients and customers, however, it's good to keep in mind that large images also have a drastic effect on your page speed. Since high-resolution images are scaled down, users don't normally notice the difference in resolution. It's better to upload images that are as large as how they are intended to be used. For example, if you have a picture that is 300px by 300px on your site, you don't want to upload it as a 4000px by 4000px image.