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 WebP format. WebP provides excellent compression while maintaining high quality, resulting in faster page loading times compared to JPG. While JPG can also be used, WebP generally offers better performance with smaller file sizes.
If your background is made up of color blocks, where few colors cover a large surface area, you should use the WebP format as well. It provides sharpness with smaller file sizes, which helps maintain fast loading times. PNG can also be used for such images, but WebP is often more efficient.
The aspect ratio of an image significantly impacts its file size and loading time, even when using the WebP format. For example, consider two images:
- A 1600x1600 image in WebP format with a size of 200 KB
- A 1600x685 image in WebP format with a size of 130 KB
The difference in aspect ratio between these images affects their file sizes. The 1600x1600 image has a higher resolution and more pixel data, leading to a larger file size. In contrast, the 1600x685 image has a more elongated aspect ratio, resulting in less pixel data and a smaller file size.
WebP generally offers better compression and smaller file sizes than JPEG while maintaining high quality. Choosing the right aspect ratio for your layout, along with using WebP, can help optimize file size and reduce loading times, leading to a faster and more efficient web experience.
For background images, it's often effective to use an image that is 1600 pixels wide and set it to Stretch. This setting allows the image to adapt to the visitor’s screen size, ensuring it covers most screen resolutions. The Stretch option makes the image resize dynamically to fit the screen, while other settings may maintain the image's fixed size, potentially resulting in parts of the image being cut off or left blank on wider screens.
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.