画像のサイズ設定

基本

Webプッシュ通知は、異なるオペレーティングシステムやブラウザ（購読者）によって表示が異なり、画像が全く表示されない場合もあります。

すべてのOS/ブラウザを対象とした通知にしたい場合、画像はそれらのどの組み合わせでもうまく表示されるようにする必要があります。

例えば、以下の画像では、Androidでは購読者が画像の中心（青い線で囲まれた部分）のみを見るのに対し、Windowsでは画像の上が表示され、Androidで見えるのと同じくらいの領域まで表示されることがわかります。

画像が購読者によって異なって表示されることを踏まえて、トリミングされたくないテキストや人物の顔などの画像は、この中央（Android）のマージン内に収まるようにしてください。他の購読者にも表示される可能性のある画像のパーツには、背景やテクスチャを配置することもできます。

異なる表示

Android

基本的なAndroidシステムでは、通知を拡大するために下にドラッグするまで画像が表示されない場合があります。おそらくこのように表示されます。

Android デフォルト

バージョン7以前のAndroidシステムでは、画像が全く表示されない場合があります。

Android 旧バージョン

しかし、新しいAndroidシステムでは、画像がこのようにトリミングされて表示される可能性があります。

Android 新バージョン

MacOS

MacOSは通知に画像を表示しませんが、バッジ（ロゴなど）を表示します。

Windows

2018年10月の更新プログラムが適用されたWindowsのバージョンでは、より完全な画像が表示されます。

青い背景に注目してください。Windowsの通知は、テーマカラーを反映した背景を持ちます。

Chromeを使用している購読者は、Androidでのトリミングとほぼ同じ位置で、画像の上部からトリミングされた画像を表示します。

Windows: 新バージョン Chrome

Edgeを使用している購読者は、Chromeよりも小さく表示されるものの、画像全体を見ることができます。

Windows: 新バージョン Edge

Windowsの旧バージョン

2018年10月より古い（更新されていない）Windowsのバージョンでは、通知の表示が異なります。

Chromeを使用している購読者は、画像全体を見ることができますが、小さく表示されます。現在のテーマに依存しない白い背景に注目してください。

Windows: 旧バージョン Chrome

Edgeを使用している購読者は、画像が全く表示されませんが、テーマを反映した背景を持ちます。

Windows: 旧バージョン Edge