Summary
This article covers the following topics with regards to images:
See below how to upload and edit an image using the Campaign Builder Beta.
1. Supported file extensions and sizes
The image component allows you to add a resizable image to a campaign.
To upload an image to your creative, click on the image icon on the components panel and select the file from your device:
ℹ️ You can upload .gif, .jpg, .jpeg, .png, .svg, and .webp image files.
⚠️ The maximum file size is 250KB for gifs and 10MB for all other formats.
Note: In addition to uploading an image file to your creative as an individual component, it is also possible to upload images as backgrounds for the campaign format or the call to action component.
2. Image optimization
Image optimization refers to the process of creating and delivering high-quality images in the right format, dimension, and resolution from any device, while keeping the smallest possible file size.
Images should appear speedily and at high quality regardless of the device or browser a consumer is visiting a website from. Image optimization impacts both the speed of delivery and how the site performs in search (SEO marketing).
Benefits of image optimisation are:
Higher quality image support: run image transformations in real time to allow high quality images to be uploaded into the Campaign Builder with a significant decrease in loading speed when it triggers on a website.
Better user experience: returning consumers that load the same campaign image on the same browser won't trigger a request to the image service again because we browser-cache these images. The same applies to any browser request for an image that is already cached on the same server.
3. Image resizing
As with other components, you can easily configure the size using the transformation controls.
You can click and drag the handles to resize an image. The aspect ration is locked by default so the image always resize proportionally:
4. Fill and border properties
You can customize and style an image from the Fill and border section of the Image properties panel.
Enable the fill color to add a solid background to images with transparency:
Add a border using the border color and border weight properties:
Reshape your images by altering corner radius:
5. Image download
You can download any image file on the creative back to your device. This is particularly useful when there are different team members working on the same project.
6. Accessibility settings
In the Accessibility settings section of the overlay properties panel it is possible to configure the alt text, which serves several functions:
It is read by screen readers in place of images allowing the content and function of the image to be accessible to those with visual or certain cognitive disabilities,
It is displayed in place of the image in browsers if the image file is not loaded or when the user has chosen not to view images, and
It provides a semantic meaning and description to images which can be read by search engines or be used to later determine the content of the image from page context alone.
ℹ️ When the Accessibility Compliance mode configurable on the Account Settings section is active, the error notification system will inform you of non-compliant settings, such as an image missing alt text.
⚠️ It is not possible to upload .gif files into the Campaign Builder Beta when Accessibility Compliance Mode is on.