Images and Gifs

B.Layer allows you to add images or gifs to your in-app message easily.

Please make sure that you are using the latest braze SDK to allow gifs to be displayed.

Image sizes

What's essential to remember is the total size of your in-app message.

Braze displays a warning when you upload an in-app message bigger than 300Kb. In practice, this warning is a legacy alert, and the absolute limit is 2Mb. Our tests revealed that the ideal size sits below 1Mb to optimize the deliverability to low connectivity users.

→ As a result, we limit the size of the images you can import to 100Kb.

→ You can work around this limit by using the "Import from link" feature and uploading your image/gif to your Braze media library.

Uploading an image

This technique minimizes the time to load the image when the IAM is triggered. The image will sit in the IAM zip file. Use this option if your image is under 100Kb.

1. Create a new in-app message or edit an existing one.
2. Make you are using the image component.
3. In the editor, click on the image, and you can see the upload option on the sidebar.
4. Select an image lighter than 100Kb
5. Upload ✔️

Importing a large image / GIF

This technique allows you to work around the 100Kb limit. It allows you to stream the image from a URL rather than having your image sitting in the IAM zip file. However, be mindful that low-connectivity users may have trouble seeing your image when the IAM is triggered.

1. Create a new in-app message or edit an existing one.
2. Make you are using the image component.
3. In the editor, click on the image, and you can see the upload option on the sidebar.
4. Click "upload with link"
5. Add the image link from your braze media library
6. Upload ✔️

Using an image as a background image

If you want to use an image as a full-height and width background for your in-app message, here is how to proceed:

1. Navigate to the editor

2. Click on "message styles"

3. Click on "background" just click on "image"

4. Upload your image

5. You can now go back and edit all other components