In this article we give some tips for troubleshooting, in case the image of a web push notification is not displayed.
Image format
Some image formats, like SVG may not be supported. Try using a common format like PNG or JPEG which are widely supported. Please note that even if a browser supports a specific format for images inside the web page (i.e. for an img tag), that does not necessarily means that the image format is also supported inside the native notifications.
Image size
Try reducing the image size using a compressor if it's a very large image. Some browsers may try to save bandwidth if you use an image of several MBs for the small space available in the notification.
Hotlinking
If the image is hosted on a separate domain, make sure that hotlinking protection is not blocking the request. Hotlinking protection may block the HTTP request of the image or redirect it when the Referer header is different from the domain where the image is hosted.
For example if the image is hosted on assets.example.com and the notification comes from example.org, then you need to make sure that the image can be displayed inside example.org: for example, you can try to create an img tag inside example.org and see if the image is displayed properly. If you don't see the image, you can use the browser developer tools to inspect the request.
Use HTTPS
For security reasons some browsers don't accept mixed contents: since the notifications always come from HTTPS, which is required for Service Workers and for the Push API, the images should also be served using HTTPS.
Use a CDN
Although a CDN is not required, it is recommended. When you use a service like Pushpad for sending the notifications to thousands or millions of subscribers, the notifications are delivered very quickly to all the subscribers. This means that the image may receive thousands of req/s and your server may not be able to handle that volume: in that case the image download requests may become very slow, or even fail, and the browser won't be able to display the image (due to failed requests). Using a CDN like Cloudflare will fix this kind of issues.
Browser support
Some browsers support only the notification icon, but they don't support the large image (this post explains the difference). This may be the reason why you see the large image on some browsers / OS, but not on others.
Try on a reliable connection
The Web Push messages are delivered over a special connection, that can work even on unreliable network conditions. However, once the push message is received and acknowledged, the activation of the service worker and the download of the images happens separately, outside the transaction. This means that if you are using the smartphone over an unreliable network it is possible that the download of the push message is successful, but then the connection for the download of the images fails. In this case the browser will display the notification without the images. In this case you can simply try to receive the notifications while you are on a different network and see if that solves the issue.
Learn more
You can learn more about the best practices for images inside web push notifications in the docs.