Images

This article will help you understand how to manage images within the Booston platform. We will explain how to upload images, how to use them and how to make sure they look great no matter the use case.

Uploading an image
Selecting your subject with a focal point
Selecting an image for usage
Conclusion
Protip: working in batch
FAQ

Uploading an image

First we need to upload an image to be able to use it. You can select an image when you are in the process of setting up a website page element or campaign. In this case we are doing it beforehand, by uploading the image in the filemanager.

Go to: Media > Filebrowser. Select a folder you want to upload your image to and click ‘upload’. Then simply select the image or images you want to upload and go back to the folder. Your image is now uploaded to Booston.

Selecting your subject with a focal point

Anybody with the right tools can create an image tailor-made for a specific case. This means creating an image with the desired dimensions, filesize, sharpness and subject presentation. This is always an option allowing you to simply upload your tailor-made image and selecting the image for usage. If this is for you, consider turning off Booston’s image optimization:

Go to settings > general > image resize quality > set to “off: no image optimization”.

Booston can however, automate image optimization for the web. This is done by first selecting your image subject with a ‘focal point’.

Go to your uploaded image > click the focal point icon. A pop-up shows you your image and previews of that image in different dimensions. These are the examples when you do not set a focal point. Now, select the focal point button and set it to a desired spot. Note that the example image is now focused on that spot for all of the preview examples.

No matter the situation, your image will now show its subject front and center and it will make the image’s filesize smaller for faster loading times. More about this in the next chapter.

Selecting an image for usage

We can now select the image for usage. The image can be used for different scenario’s ranging from campaigns to your website’s page elements. In this example we are adding the image to a page element.

If you want to add your image to a page element go to: content > page elements > edit a page element. For the image click ‘search or upload file’. The filebrowser will pop-up. Go to your image and select it. Now save the page element by clicking save.

(Note that in this fase of selecting an image for usage you can also combine uploading an image, adding a focal point and selecting the image in one go.)

Now that we have selected the image to the page element, a couple of things happen automatically. This is best explained by looking at the image on the website. This is the result:

The image is focused automatically on the selected subject and remains very sharp in its presentation.

The image is cropped. This means that unused parts of the image are cut off making the image smaller in size resulting in faster loading times. If we would add the same image to another page element which might be more vertical, different parts are cropped offcourse. For each page element an optimized version is prepared on the fly. An example of a more vertical image might be something like this:

The image is then resized to the needed dimensions (in pixels). The first image is resized to 348 * 377 pizels. The second one to 288 * 377 pixels. The original image however is 1200 * 1200 pixels. In other words the total reduction in this fase is about 80 to 90 percent increasing loading speeds without compromising quality.

Loading times are further increased by converting the image to webP. webP is an image format created by Google which makes the filesize as small as possible without decreasing its quality.

Finally lazy loading is added to make the website images load even faster by only loading in images that are ‘above the fold’. Or simply put: images that are visible in screen. Images lower on the page are loaded later when your visitor starts scrolling.

Conclusion

In this article we’ve uploaded an image and added it to a website element. In the process we automatically made sure our subject was centered by adding a focal point.

We automatically reduced the filesize of the image from about 2 Megabytes to a filesize of 12kb without losing quality. That’s about an 97% reduction (!). Of course, depending on the device used this might even be more. For mobile users, smaller optimized images are prepared. This increases website speed, especially on mobile devices and devices with poor internet connection. Indirectly this increases SEO (search engine optimization) or simply put your ranking in Google because website speed is a known ranking factor.

Protip: working in batch

Want to manage a lot of images at once and speed up your work? Make sure when uploading your image you select multiple images in one go. Then head over to:

Media > Focal Point > "your images folder" > click an image > set a focal point > quickly move over to the next image and so on.

This way you can, in one go, manage all your images. When adding an image to your website or a campaign everything important is then handled automatically from this point forward without any additional work.

FAQ

Which image file formats are allowed?
.jpeg and .png are optimal. These file formats can be automatically optimized by focusing on the subject and reducing the filesize as discussed in this article. Other file formats like .svg and .gif are also able to be uploaded and selected, however will not be able to be automatically optimized.
Which dimensions should I use for an image?
The simple awnser is make sure the dimensions and image quality are as high as can be but not exceeding 10 MB in filesize. Booston will automatically resize the image for its specific usecase. As discussed in this article the image will be made into a .webP file with the exact dimensions needed for the usecase. Selecting a focal point might be prudent to make sure the subject you care about is visible in any case.
Can the image quality optimization be turned off?
Yes. You can turn off the automated processes as described in this article by going to settings > general > image resize quality > set to “off: no image optimization”. Do remember that this full manual control means that you will have to tailer optimize the image for every usecase and optimizing the image’s filesize is needed to keep everything working fast for your target audience.