What is the best image size for my push notification?

Need help setting up your first push campaign with an image? Here is all the information you need to know (format, size, and more).

Using the Best Format and Size for Your Image

You can easily add an image to your push campaign from the campaign editor:

How add an image in the push composer

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.

Preview portrait image in IOS and Android push notifications

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.

How images are displayed on IOS / Android

• 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.

Expanded notifications preview

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: