Using the Best Format and Size for Your Image
You can easily add an image to your push campaign from the campaign editor:
Here are the recommended format and sizes for images in push notifications:
File format: Batch requires a PNG or JPEG file.
Size: Width must be at least 300px, height at least 200px. Avoid using images wider than 2000 pixels. Also, make sure that your image is not bigger than 1MB.
Aspect ratio: Use images in landscape format respecting a 2:1 ratio (e.g. 1000x500px).
Composition: Important information or the product you want to show should be in the middle of the image or as far as possible from the borders of the image.
🚧 There is no one-size-fits-all solution.
The image you attached to your notification may be displayed differently based on:
Your users' OS. iOS, Android, Mac OS and Windows manage notification images differently. Your image may be displayed correctly on iOS and cropped on Android for example.
Your users' screen size.
Your users' browser (for web push notifications only).
Using an Image Containing Text
Ensure the text is in the middle of the image or as far as possible from the image borders:
Last but not least, focus on the text of your notification and avoid including too many details in your image. Users will read the text of the notification before seeing the image.
Using a Portrait Image
Batch allows you to use a portrait image in your push campaigns, though we do not recommend it as both iOS and Android will display the image in full width, cropping the top and the bottom of your image.
Testing Your Image
You can click the "Send a test" button in the campaign editor to see how your message looks on your device (more information here: iOS / Android / Web Browser).
Understanding How Images Are Displayed
iOS/Android
On iOS and Android, the image attachment is displayed as a square thumbnail when the notification is collapsed. Your image will be cropped on the right and left-hand sides.
Users can expand the notification to see the image attached to the notification:
iOS: with a force touch or by sliding the notification and clicking the "Display" button. iOS will display the image at full width.
Android: by swiping down the notification.
Web Push Notifications
Users can receive web push notifications on desktop and mobile if they turned on push notifications from a compatible browser (e.g. Google Chrome, Mozilla Firefox, Microsoft Edge or any other Chromium-based browser).
On Android, web push notifications look like any other mobile notifications.
On desktop, the aspect of the notifications may change depending on your users' browser and OS:
Windows: Images will be displayed exclusively for Chrome. This also applies to any Chromium-based browser (e.g. Microsoft Edge, etc). Firefox uses a custom format to display push notifications. That format doesn't support images yet.
MacOS: Recent versions of Chrome, Firefox and Microsoft Edge use MacOS' native notification format, which doesn't support images yet.
You can easily preview your message on different OS' and browsers from the campaign editor to make sure it will be displayed correctly:
