Imaging Sizing Guide
This page details the different ways that imagery can appear in web push notifications on different devices so that you can design content which looks right for all users.
Introduction
Web Push Notifications will display differently on different Operating Systems and Browsers (subscribers), and some will not show an image at all.
If you want to target a notification to all OS/Browsers then your image should show up well on any combination of these.
For example, the image below, you can see that on Android your subscribers will only see the center of the image (surrounded by blue lines), whereas subscribers on Windows will see the top of the image, about down to the same area that you see on Android.
Given that the image is shown differently to different subscribers you make sure text, and images such as people's heads, which you don't want to display cropped, are within this central (Android) margins. You can always put a background, or texture that shows in the parts of the image that may show to other subscribers.
Differences & Examples
Android
On base Android systems you may not see an image until you drag down to enlarge the notification. It will probably display like this:
On Android systems version 7 or older you may not see any image at all:
But on newer Android systems you are likely to see the image cropped like this:
MacOS
MacOS does not display an image on notifications, but will show a badge (logo etc).
Windows
Versions of Windows, with updates form October 2018, will show fuller images.
Note the blue backgrounds: notifications on Windows will have backgrounds that reflect your theme color.
Subscribers using Chrome will see the image from the top, cropped at about the same position as the crop on Android.
Subscribers using Edge will see the whole image, although it will be shown smaller than for Chrome.
Older versions of Windows
Version of Windows older than October 2018 (that haven't been updated) will see your notifications differently.
For subscribers using Chrome they will see the whole image, but smaller. Note the white background, which does not depend on the current theme.
Subscribers using Edge will not see any image, but will have a background reflecting the theme.
Last updated
