HTMLメールの中で画像を利用する際、どのフォーマットを利用しているでしょうか。多くの場合、Webと同じくGIF/JPEG/PNG辺りを利用しているかも知れません。
今回はCan I emailより、各画像フォーマットについてメールクライアントのサポート状態を調べてみました。
サマリー
最も安定して使えるフォーマットはJPEGとPNGになります。ほぼすべての環境において、問題なく利用できます。GIFについてはOutlook for Windowsで一部問題があるようです。
Base64は画像を埋め込む形なので問題ないかと思いましたが、多くの環境で表示できないので注意してください。SVGもWebの中ではよく使われるようになっていますが、HTMLメールでは対応していないものが多いようです。
webPは意外とGmailが対応していません（Webブラウザの対応状況に依存したり、JPEGに変換されるそうです）。iOSやmacOSは問題なく利用できるようです。
対象のメールクライアント
世界中には多くのメールクライアントが存在しますが、ここでは日本においてよく使われているであろうものに限定しています。
- macOS
- Webブラウザ、メール（標準のメールクライアントアプリ）
- iOS
- Gmailアプリ、メール（標準のメールクライアントアプリ）、Outlook
- Android、Outlook
- Gmailアプリ
- Windows
- Outlook、Windowsメール
画像フォーマット
今回対象とした画像フォーマットです。
- APNG
アニメーションPNGと呼ばれるフォーマットです。PNGでGIFのようにアニメーションできます。 - AVIF
AV1 Image File Formatの略です。次世代の画像フォーマットと呼ばれています。Netflixによって開発されています。 - Base64
画像を文字列にして、src要素に書き込む方法です。 - BMP
昔からWindowsで使われている画像フォーマットです。 - GIF
アニメーションするのに使われるフォーマットです。 - HDR
ハイダイナミックレンジ画像です。 - HEIF
iOSなどで写真を撮った際に使われるフォーマットです。JPEG画像よりもファイルサイズが小さいのが特徴です。 - ICO
Windowsのアイコン用に用いられてきたフォーマットです。 - JPEG
写真などで最も良く使われている画像フォーマットです。圧縮が可能ですが、非可逆（元に戻せない）です。 - PNG
圧縮をサポートしたフォーマットです。可逆圧縮ですが、写真などで用いるとJPEGよりもサイズが大きくなります。 - PPM
プレーンテキストとして送信できる画像フォーマットです。白黒のみ表現可能です。 - SVG
XML形式のフォーマットです。ベクター形式のため、写真よりもイラストなどでよく使われます。 - TIFF
様々な形式のビットマップ画像を1つのファイルにできるフォーマットです。圧縮に対応しています。 - webP
Googleが開発した画像フォーマットです。webPが画像、webMが動画になります。
対応結果
各メールクライアントにおける対応状況は次のようになります。△になっているものは、表示はできますが一部に問題があります。問題は例えば次のようなものです。
- 色が再現できていない
- Webブラウザに依存している
- アニメーションがうまく実行できない
| フォーマット | Appleメール | Gmail | Outlook | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| macOS | iOS | Web | iOS | Android | Windows | Windowsメール | macOS | Web | iOS | Android | |
| APNG | ✓ | ✓ | ✓ | ✓ | △ | ✓ | |||||
| AVIF | ✓ | ✓ | |||||||||
| Base64 | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |||||
| BMP | ✓ | ✓ | △ | ✓ | △ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| GIF | ✓ | ✓ | ✓ | ✓ | ✓ | △ | ✓ | ✓ | ✓ | ✓ | ✓ |
| HDR | |||||||||||
| HEIF | △ | △ | |||||||||
| ICO | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | |
| JPEG | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| PNG | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| PPM | |||||||||||
| SVG | ✓ | ✓ | △ | △ | ✓ | ✓ | ✓ | ||||
| TIFF | ✓ | ✓ | △ | ✓ | △ | ✓ | ✓ | ✓ | |||
| webP | ✓ | ✓ | △ | △ | △ | ✓ | ✓ | ✓ | ✓ | ✓ |
まとめ
画像付きのHTMLメールを送っても、表示ができなければ効果はなくなります。手元の環境だけで確認すると、他のメールクライアントで使えないフォーマットを利用してしまう可能性があるでしょう。
なるべく多くのメールクライアントで表示するならばJPEG/PNG/GIFの利用だけにとどめておくのが良さそうです。システムから自動生成する場合などは画像フォーマットの変換を考慮した方が良いでしょう。
