Good practices for the use of images

The main image file types

The main image file types, and the ones accepted by our platform, are:

1. JPG - This format is mainly used for complex images. Its compression discards some of the image information in order to reduce the size of the file, so the images might be pixelated.

2. PNG - This format uses a compression algorithm that preserves the quality of the image, but the size of the file will usually be larger.

3. GIF - This format is for animated sequences of images, great for simple animations on a loop.

4. SVG - This is a vector-based format that is great for logos and graphics that use a limited number of colors. The advantage is that it can be scaled without losing its quality while maintaining the small size of the file.

 

Which format is better for background images?

If your background is a landscape with many details, it is best to optimize your image in the JPG format, as that results in a faster page loading time. You can use PNG to make the image sharper, but the file size will increase significantly, affecting the page's loading time.

If your background is made up of color blocks, where few colors cover a large surface area, you should use the PNG format, as they will look sharper and the file size will be small as well, so the loading time will not be affected.

The chosen aspect ratio also matters in terms of file size, which impacts the loading time, as seen below:

Screen_Shot_on_2020-03-16_at_00_05_07.png

For background images, it's best to set an image that is 1600 pixels wide set to Stretch, to cover most screen resolutions. The Stretch setting means the image will adapt to the screen size of the visitor. All of the other settings will maintain the fixed size of the image even if the screen is wider than that.

Screen_Shot_on_2020-03-16_at_02_26_53.png

 

What size should I use for my images?

Since 1600 pixels wide images will cover most devices, you should not need to use background images bigger than 1600 x 1600 pixels. For standalone image elements on the page, we suggest uploading them in the size you intend to use them at, not a bigger one to then manually scale them down in the builder. This will result in crisp images and better loading time.

 

What about images for the mobile page?

The mobile canvas is 400 pixels wide. Since you can set different block background images on the mobile version, we suggest keeping those images under 500 pixels for the best look and performance.