Each time you upload an image, up to 5 reduced-size copies of the image are created. Website Builder then automatically inserts the appropriately sized image into the desktop, tablet, and mobile sites, ensuring your site visitors always see the correct sized image for their device.

Things to note:

The following versions are supported for Webp images:

The following image file types are supported:

png, jpg, jpeg, gif, svg, svg+xml, ico, x-icon, webp

The size of the uploaded image is not increased, and only images that are smaller than the original are created. For example, if a 2000px width image is uploaded, five new optimized copies will be created. If a 100px width image is uploaded, no new images will be created.

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 should not exceed 15MB.

Uploading an image bigger than the limit could result in the following errors:

The Slider widget is typically used with larger-sized images for dramatic effect. Sliders commonly stretch from end to end, so using wider images to fit the slider is best. For square sliders, use an even aspect ratio, such as 1:1.

It is 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.

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.

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

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

The image ratios should be the same for design consistency. Leave some padding in the image to use the hover effect so your images are not cut off.

Icons are an essential 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.

For more information, see Site Icons.

SVGs are image files containing HTML code, meaning when you add an SVG icon to your site, you also add lines of code. Multiple complex SVGs can add thousands of lines of code and cause your site to load slowly. If you need to use multiple SVG icons on the same page, we recommend turning some into regular images (.png, .jpeg, etc.) to avoid loading or functionality issues.

Favicons are not used on your site but are displayed on the tab when users open your website. It is recommended you use ICO format. To convert image files to ICO, see the following resource.

You should use SVG format for logo images, as SVG files are not optimized the same way as other image files, so even if the logo you upload is small in size, you will retain quality.

The aspect ratio is the ratio of an image's width and height attribute. A 16:9 aspect ratio can be a 16x9 px image or a 1600x900 px image. It is an image resolution that has a ratio of 16:9.

Visualizing the two most common aspect ratios:

While images are optimized on your site, it does not resize the design of images on your site. If you use an image on the desktop with an aspect ratio of 16:9, it will look perfect since a desktop device is wide. However, A mobile device is much smaller, 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 resize the image's dimensions to fit. Size changes are device independent.

Uploading the biggest resolution for your site guarantees that your site's images are high-resolution for your clients and customers. However, keep in mind that large images also have a drastic effect on your page speed. Since high-resolution images are scaled down, users usually don't notice the difference in resolution. It is better to upload images 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 do not want to upload it as a 4000px by 4000px image.

​