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 use in the Sitebuilder and also cover how to save images correctly so that they are optimized.
Image size and format
The maximum image size you can use in the Sitebuilder is 5 Mb. To upload larger images, you may be required to upgrade.
The following file formats are accepted: .jpg, .jpeg, .png, .gif. Read more about image file formats.
Inside content images
The recommended width for the images to use in the Article and Text blocks is 1200 px.
Note: The space around the image may vary depending on the screen size.
Full-size images
Certain blocks allow you to replace block backgrounds and add full-width images that stretch across your whole screen from left to right.
The recommended width for full-width images is at least 1920 px. This way, you ensure that your full-width images look good across any device.
Pre-formatted cropping grids
When you upload your image, you may want to change your image position and focal point, or grids around it. The crop and focal point features can help you position your image beautifully inside the block without damaging your design.
As a result, your blocks will look professional without the need for you to use image editing tools. Read about these features in detail in our dedicated tutorial.
Note: Ensure the resolution of your images is high enough so that when you zoom your image in it won’t look blurry.
Image sizes for your site
It might be possible that the recommended sizes won’t match your needs. However, the Sitebuilder automatically resizes your images to fit the block design to ensure your website looks professional.
Images for Retina screens
For Retina devices, you need to double the image pixel density. This means you need images twice the size of Retina devices so they look blur-free and crisp. If you have an image space of 750x500 px, for Retina screens, the image you are uploading should be 1500x1000 px. 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. 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, and so on since they will create SEO-unfriendly image names.
Best practices for uploading images
- Uploading 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.