This article covers everything you need to know on how to prepare your images for the web. It will list the recommended image sizes for the use in the Sitebuilder and also covers how to save images correctly so that they’re optimized for speed.
Image size and format
The maximum image size you can use in the Sitebuilder is 5 Mb. To upload larger images, you may require to upgrade.
The following file formats are accepted: .jpg, .jpeg, .png, .gif.
Inside content images
The recommended width of images for the use with Article and Text blocks is 1200px.
Note: the space around the image will vary depending on the screen size.
Full-size images
Certain blocks allow you to replace block background and add full-width images that stretch across your whole screen from left to right. To ensure that your full-width images look good across any device big or small the recommended width is at least 1920px.
Pre-formatted cropping grids
To make sure that your image fits the block layout, preset cropping grids are used. You can choose the area that will be inserted in the page.
This way, you should not worry if your image is too high for the particular block. As a result, your blocks will look professionally designed without the need for you to use image editing tools.
Note: If your image resolution is not high enough, excessive image increases can make it look blurry.
Correct image sizes for your site
It might be possible that the recommended sizes won’t match your needs. If you are unsure about the right image dimensions, no need to worry as the Sitebuilder will automatically resize your images to fit the block design.
Images for Retina screens
For retina devices, you need to double the image pixel density. This means you need images twice the size for retina devices so they look blur-free and crisp. Make sure to upload large enough images to your site. If you have an image space of 750x500px, for Retina screens it should be 1500x1000px when uploading to the Sitebuilder. On a non-Retina device, the displayed images will remain the same.
The file size of your images
Uploading heavy and non-optimized images on your website will slow down your page and create a bad user experience. There are a number of things to consider when optimizing and saving images for the web. You should consider what file type to use, JPG, PNG or GIF and you should save them in the right color format which is sRGB for the web.
When exporting for the web using a third-party image editing tool such as Adobe Photoshop, opt for selecting the export of 65-75% quality. It strikes the correct balance of quality and optimal image file size.
You can use third-party image resizing to remove excess data from images and reduce file size, for example, JPEG Mini or TinyPNG.
Naming your image file
For image filenames, please make sure they are appropriate for each particular image. Use only Latin letters, numbers, underscores and hyphens. It's best to avoid question marks, spaces, percent signs, etc since they will create SEO-unfriendly image names.
Best practices for uploading images
- Uploading images large, unoptimized images will not only create issues with the user experience on your site but will also cause slow loading speed, higher bounce rate, and lower search engine ranking. You can test your site for speed using the GTMetrics tool.
- For horizontal images try to shoot wider shots than usual for your web content, to avoid cropping of important image content.
- If you are preparing images for use in the Gallery block make sure they are all the same height, regardless if they are horizontal or vertical.
