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 that 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. WEBP - This is a format developed by Google that uses advanced compression techniques to provide high-quality images with smaller file sizes, making them ideal for web use and faster loading times.
4. GIF - This format is for animated sequences of images, great for simple animations on a loop.
5. 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:
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.
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.
You can find more detailed information about the way image sizes affect page speed here: https://d.pr/RAbBT6.
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.
Why does my PNG image show a black background?
PNG images with no background might show a black background when uploaded inside the builder. This happens with some PNG files when the image resolution is too large. As a solution, you can try any of the below:
- You could change the format and use a WEBP image, and it will show accordingly.
- Alternatively, please resize it by a small amount on any image editing software and then try uploading the new version. If the latest version still has a black background, please resize it a bit more and upload it again until the black background no long shows up.
- You may also run the image on TinyPng.com and save the result. The compressed version of your image should not have the black background anymore, but if it still does, please try downsizing it a bit more.
Uploading images in the size you intend to use them at, not a bigger one, is a good practice, as this will result in crisp images, better loading time, and will keep the transparent background of PNG images.